/* alvinpivaty.golf — feuille de style principale */ /* Deux directions artistiques, un seul jeu de règles. Tout passe par des variables : une page bascule en sombre en posant la classe « sombre » sur , et rien d'autre ne change. C'est ce qui rend le choix réversible page par page, et vérifiable. Les noms de variables sont hérités (--night, --brass…) et conservés pour ne rien casser ; seules leurs valeurs changent. */ :root{ --night:#ffffff; --surface:#f4f5f7; --surface2:#ffffff; --ink:#16181d; --ink2:#3a3d45; --muted:#6c707a; --brass:#447244; --brass-deep:#345a34; --brass-wash:#eaf1ea; --line:#dcdde1; --line2:#ececee; /* Le texte posé sur un aplat bleu : blanc en clair, presque noir en sombre, où l'accent devient lumineux. */ --sur-brass:#ffffff; --ombre:20,22,26; /* la couleur des ombres, en composantes */ --accent:68,114,68; /* l'accent, en composantes, pour les voiles */ --sys:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; --wrap:1120px; } /* ───────────────────────────────────────────────────────────────────── DIRECTION SOMBRE Posée par la classe « sombre » sur . On ne redéfinit que les valeurs des variables : toutes les règles de la feuille suivent sans être dupliquées, et une page revient au clair en retirant la classe. ───────────────────────────────────────────────────────────────────── */ html.sombre{ --night:#0a0d11; --surface:#12161c; --surface2:#161b22; --ink:#f3f5f7; --ink2:#ccd2d9; --muted:#949ca6; /* L'accent s'éclaircit : le bleu profond du mode clair serait illisible sur du nuit. « brass-deep » devient donc plus clair, pas plus foncé, puisqu'il sert au survol. */ --brass:#8ec98e; --brass-deep:#aeddad; --brass-wash:#16251a; --line:#242c35; --line2:#1b2129; /* Sur un aplat bleu clair, le texte doit être sombre. */ --sur-brass:#0a140a; --ombre:0,0,0; --accent:142,201,142; color-scheme:dark; } /* Les photos claires sur fond nuit : un filet plutôt qu'un aplat blanc. */ html.sombre .photo,html.sombre .card .thumb{background:var(--surface)} html.sombre .art figure img{background:var(--surface);border-color:var(--line)} /* Le logo est noir : sur fond nuit il faut l'inverser. */ html.sombre .nav .brand img,html.sombre .foot .sig img{filter:brightness(0) invert(1);opacity:.92} *{box-sizing:border-box} html{scroll-behavior:smooth} /* Un lien d'ancre ne doit pas coller sa cible tout en haut de l'écran. */ [id]{scroll-margin-top:24px} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--night);color:var(--ink); font-family:var(--sys); font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased; } a{color:inherit} img{max-width:100%;height:auto} .jose{font-family:var(--mono)} .skip{position:absolute;left:-9999px} .skip:focus{left:12px;top:12px;z-index:99;background:var(--brass);color:var(--sur-brass);padding:10px 16px} :focus-visible{outline:2px solid var(--brass);outline-offset:2px} /* ===== NAV ===== */ .nav{display:flex;align-items:center;gap:18px;max-width:1220px;margin:0 auto;padding:13px 24px;flex-wrap:wrap} .nav .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);font-weight:640;letter-spacing:-.01em} .nav .brand img{height:28px;width:auto;display:block} .nav .brand span{font-size:16px} .nav .links{margin-left:auto;display:flex;gap:15px;flex-wrap:wrap;align-items:center} .nav .links a{font-size:14.5px;letter-spacing:0;font-weight:450;color:var(--ink2);text-decoration:none} .nav .links a:hover{color:var(--ink)} .nav .links a[aria-current="page"]{color:var(--brass)} /* menu déroulant « Cours & stages » */ .nav .grp{position:relative;display:flex;align-items:center} .nav a.grp-t{text-decoration:none} .nav .grp-t{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer; font-size:14.5px;letter-spacing:0;font-weight:450;color:var(--ink2)} .nav .grp-t:hover,.nav .grp.open .grp-t{color:var(--ink)} .nav .grp-t.here{color:var(--brass)} .nav .grp-t .car{width:9px;height:6px;flex:none;transition:transform .18s ease} .nav .grp.open .grp-t .car{transform:rotate(180deg)} .nav .grp-m{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);z-index:60; display:none;flex-direction:column;min-width:200px;padding:10px 0; background:var(--surface2);border:1px solid var(--line);border-radius:3px; box-shadow:0 18px 40px rgba(var(--ombre),.14)} .nav .grp-m::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px} .nav .grp.open>.grp-m{display:flex} @media (hover:hover){.nav .grp:hover>.grp-m{display:flex}} .nav .grp-m a{display:block;padding:9px 20px;white-space:nowrap;color:var(--muted)} .nav .grp-m a:hover{color:var(--brass);background:var(--brass-wash)} /* --- menu mobile --- */ .nav .burger{display:none} @media (max-width:900px){ .nav{gap:0;align-items:center} .nav .burger{display:inline-flex;flex-direction:column;align-items:center;justify-content:center; gap:5px;margin-left:auto;width:46px;height:46px;padding:0;background:none;border:0;cursor:pointer} .nav .burger span{display:block;width:23px;height:1.5px;background:var(--ink);border-radius:1px; transition:transform .2s ease,opacity .15s ease} .nav.open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .nav.open .burger span:nth-child(2){opacity:0} .nav.open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} .nav .links{display:none;order:3;flex-basis:100%;width:100%;margin:16px 0 0;padding:10px 0 4px; flex-direction:column;align-items:stretch;gap:0;border-top:1px solid var(--line)} .nav.open .links{display:flex} .nav .links > a{padding:14px 2px;font-size:14px;letter-spacing:.06em; border-bottom:1px solid var(--surface)} .nav .grp{display:block;position:static} .nav .grp-t{display:flex;width:100%;padding:18px 2px 6px;color:var(--brass); font-size:11px;letter-spacing:.2em;pointer-events:none;cursor:default} /* Sauf quand c'est un lien : là, il doit rester tapotable. */ .nav a.grp-t{pointer-events:auto;cursor:pointer;text-decoration:none} .nav .grp-t .car{display:none} .nav .grp-m,.nav .grp.open>.grp-m{position:static;transform:none;display:flex;min-width:0; padding:0 0 4px;background:none;border:0;box-shadow:none;flex-direction:column} .nav .grp-m::before{content:none} .nav .grp-m a{padding:12px 2px 12px 18px;font-size:14px; border-bottom:1px solid var(--surface)} .nav .links > .btn.small{margin-top:18px;padding:15px;text-align:center;font-size:13px; border-bottom:0} } .coach-alt{max-width:1220px;margin:18px auto 0;padding:0 24px;text-align:center; font-size:14.5px;color:var(--muted);font-weight:300} .coach-alt a{color:var(--brass);text-decoration:none;border-bottom:1px solid rgba(var(--accent),.30);padding-bottom:1px} .coach-alt a:hover{border-bottom-color:var(--brass)} /* ===== BOUTONS ===== */ .btn{ display:inline-block;background:var(--brass);color:var(--sur-brass);text-decoration:none;cursor:pointer; font-family:inherit;font-size:16px;font-weight:600;letter-spacing:0; padding:13px 26px;border:1px solid transparent;border-radius:980px; } /* Le bouton du menu est aussi un lien du menu : sans cette règle, la couleur de texte du menu l'emporte et le libellé devient illisible sur le bleu. */ .nav .links a.btn{color:var(--sur-brass);font-weight:600} .nav .links a.btn:hover{color:var(--sur-brass)} .nav .links a.btn.ghost{color:var(--brass)} .btn:hover{background:var(--brass-deep)} .btn.ghost{background:var(--surface2);color:var(--brass);border:1px solid var(--line)} .btn.ghost:hover{background:var(--surface);color:var(--brass-deep)} .btn.small{padding:9px 17px;font-size:14.5px} .cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center} /* ===== TYPO ===== */ .eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--brass);font-weight:500;margin:0 0 18px} h1{font-weight:640;font-size:clamp(30px,4.4vw,52px);line-height:1.08;letter-spacing:-.026em;margin:0 0 18px;max-width:19ch;text-wrap:balance} /* Ancien traitement manuscrit, remplacé par une seconde ligne plus claire : même rôle typographique, sans police distante. */ h1 .script,h2 .script{display:block;margin-top:12px;font-weight:500;color:var(--ink2);text-transform:none;font-size:.62em;letter-spacing:-.015em;line-height:1.25} h2{font-weight:640;letter-spacing:-.022em;font-size:clamp(24px,3.1vw,36px);line-height:1.1;margin:0 0 12px;text-wrap:balance} h3{font-weight:640;letter-spacing:-.012em;font-size:19px;margin:0 0 8px;line-height:1.3} .sub{font-size:18.5px;font-weight:400;color:var(--ink2);max-width:40rem;margin:0 0 26px} .intro{color:var(--ink2);max-width:42rem;margin:0 0 34px;font-weight:400;font-size:17px} p{max-width:44rem} /* ===== SECTIONS ===== */ .head{max-width:var(--wrap);margin:0 auto;padding:56px 28px 20px} .sec{max-width:var(--wrap);margin:0 auto;padding:60px 28px 0} .sec:last-of-type{padding-bottom:80px} .hero{display:grid;grid-template-columns:1.35fr .65fr;gap:48px;align-items:center;max-width:var(--wrap);margin:0 auto;padding:48px 28px 52px} .hero .photo{max-width:320px;justify-self:end} @media (max-width:860px){.hero{grid-template-columns:1fr;gap:30px}.hero .photo{justify-self:start;max-width:280px}} /* ===== PHOTOS ===== */ .photo{width:100%;display:block;box-sizing:border-box;border-radius:12px;background:var(--surface);overflow:hidden} .band-img{max-width:620px;margin:52px auto 0;padding:0 28px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center} @media (max-width:760px){.grid2{grid-template-columns:1fr}} .gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} @media (max-width:820px){.gal{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.gal{grid-template-columns:1fr}} .gal .photo{aspect-ratio:3/4;object-fit:cover;padding:8px} .gal.wide .photo{aspect-ratio:4/3} .gal.two{grid-template-columns:repeat(2,1fr)} @media (max-width:520px){.gal.two{grid-template-columns:1fr}} /* ===== BANDEAU PREUVE ===== */ .proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)} .proof ul{max-width:var(--wrap);margin:0 auto;padding:18px 28px;display:flex;gap:12px 34px;flex-wrap:wrap;list-style:none} .proof li{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap} .proof li::before{content:"—";color:var(--brass);margin-right:10px} @media (max-width:560px){.proof ul{gap:10px 22px;padding:16px 24px} .proof li{white-space:normal;font-size:12px}} /* ===== CARTES ===== */ .doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px} .doors.deux{grid-template-columns:repeat(2,1fr)} .doors.quatre{grid-template-columns:repeat(4,1fr)} @media (max-width:900px){.doors.quatre{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.doors.deux,.doors.quatre{grid-template-columns:1fr}} .door{background:var(--surface);border:1px solid var(--line);padding:30px 26px 26px;display:flex;flex-direction:column;gap:11px} .door.hi{border-color:var(--brass-deep);background:linear-gradient(160deg,var(--surface2),var(--surface))} .door .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);font-weight:700} .door h3{margin:0;font-size:17px} .door p{margin:0;color:var(--muted);font-size:15px;flex:1} .door .price{font-size:15px;font-weight:700} .door .price small{display:block;font-weight:400;color:var(--muted);font-size:12.5px;margin-top:3px} .door .go{font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);text-decoration:none} .door .go::after{content:" →"} /* ===== BANDE SIGNATURE ===== */ .camp{border:1px solid var(--brass-deep);background:radial-gradient(1100px 380px at 85% -20%,var(--brass-wash),transparent 60%),var(--surface2);padding:52px 38px} .camp .k{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);font-weight:700;margin:0 0 14px} .camp p{color:var(--muted);max-width:40rem;margin:0 0 26px;font-weight:300} .meta{display:flex;gap:26px;flex-wrap:wrap;margin:0 0 30px;padding:0;list-style:none} .meta li{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);font-weight:600} .meta li small{display:block;font-family:var(--sys);color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0;font-size:13px} /* ===== PROGRAMME ===== */ .prog{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:24px 0 0} @media (max-width:980px){.prog{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.prog{grid-template-columns:1fr}} .day{border:1px solid var(--line);background:var(--night);padding:20px 18px;display:flex;flex-direction:column;gap:8px} .day .n{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);font-weight:700} .day h3{font-size:15px;margin:0} .day p{margin:0;color:var(--muted);font-size:14px;flex:1} .day .tool{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding-top:8px;border-top:1px solid var(--line)} /* ===== TARIFS ===== */ .tarifs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:12px;margin-top:20px} .tarif{border:1px solid var(--line);background:var(--night);padding:18px 20px} .tarif.hi{border-color:var(--brass-deep)} .tarif .lab{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);font-weight:700;margin:0 0 6px} .tarif .px{font-weight:800;font-size:25px;line-height:1.1;margin:0} .tarif .dt{color:var(--muted);font-size:13.5px;margin:4px 0 0} /* ===== DATES ===== */ .daterow{display:grid;grid-template-columns:180px 1fr auto auto;gap:10px 22px;align-items:center;padding:18px 22px;border:1px solid var(--line);background:var(--surface);margin-bottom:10px} .daterow.hi{border-color:var(--brass-deep);background:linear-gradient(160deg,var(--surface2),var(--surface))} .daterow .d{font-family:var(--mono);font-weight:700;color:var(--brass);font-size:13.5px;letter-spacing:.08em;text-transform:uppercase} .daterow .t{font-weight:700;font-size:15.5px} .daterow .t small{display:block;font-weight:400;color:var(--muted);font-size:14px;margin-top:3px} .daterow .pl{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap} @media (max-width:780px){.daterow{grid-template-columns:1fr;gap:12px}.daterow .btn{justify-self:start}} /* ===== TEASER / CITATION ===== */ .teaser{border:1px solid var(--line);background:var(--surface);padding:38px 34px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center} @media (max-width:720px){.teaser{grid-template-columns:1fr;justify-items:center;text-align:center} .teaser .q{max-width:none}} .teaser .q{font-weight:600;font-size:clamp(18px,2.1vw,24px);line-height:1.4;max-width:34ch;margin:0} .teaser .q b{color:var(--brass);font-weight:600} /* ===== CHAPITRES HISTOIRE ===== */ .chap{display:grid;grid-template-columns:80px 1fr 260px;gap:30px;padding:44px 0;border-top:1px solid var(--line);max-width:var(--wrap);margin:0 auto} .chap:first-of-type{border-top:0} @media (max-width:920px){.chap{grid-template-columns:56px 1fr;gap:24px} .chap>picture{display:block;grid-column:2;max-width:320px} .chap .photo{max-width:none}} @media (max-width:560px){.chap{grid-template-columns:1fr;gap:14px;padding:34px 0} .chap>picture{grid-column:1;max-width:none;margin-top:6px} .chap .num{font-size:34px}} .chapwrap{padding:8px 28px 0;max-width:var(--wrap);margin:0 auto} .chap .num{font-size:48px;font-weight:300;color:var(--brass);line-height:1} .chap .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);font-weight:700;margin:0 0 8px} .chap h2{font-size:21px;margin:0 0 12px} .chap p{margin:0 0 12px;color:var(--ink2);font-weight:300;max-width:44rem} .chap p strong{color:var(--ink);font-weight:600} .chap p em{color:var(--brass);font-style:italic} .chap .photo{max-width:250px} /* ===== TECHNOS / FAQ ===== */ .tech{border:1px solid var(--line);background:var(--surface);padding:24px 24px} .tech .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);font-weight:700;margin:0 0 6px} .tech h3{font-size:16px;margin:0 0 8px} .tech p{margin:0;color:var(--muted);font-size:14.5px} .faq{border-top:1px solid var(--line);margin-top:8px} .faq details{border-bottom:1px solid var(--line);padding:0} .faq summary{cursor:pointer;padding:18px 0;font-weight:700;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--brass);font-size:22px;font-weight:400;line-height:1} .faq details[open] summary::after{content:"–"} .faq details p{margin:0 0 20px;color:var(--muted);max-width:46rem} /* ===== PARTENAIRES ===== */ .partners{margin-top:32px;border:1px solid var(--line);background:var(--surface);padding:24px 30px;display:flex;align-items:center;gap:22px 40px;flex-wrap:wrap} .partners .pk{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);font-weight:700;max-width:22ch;line-height:1.8} .plogos{display:flex;gap:44px;align-items:center;margin-left:auto;flex-wrap:wrap} /* ===== FORMULAIRES ===== */ .lead{border:1px solid var(--line);background:var(--surface);padding:38px 34px;display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center} @media (max-width:820px){.lead{grid-template-columns:minmax(0,1fr);text-align:center} .lead>*{justify-self:stretch;min-width:0}} .lead p{color:var(--muted);margin:0;font-size:15px} form{display:flex;gap:10px;flex-wrap:wrap} input,select,textarea{ background:var(--night);border:1px solid var(--line);color:var(--ink); font:inherit;font-size:15px;padding:13px 15px;border-radius:2px;font-family:var(--sys); } .lead input{flex:1;min-width:210px} form.stack{display:grid;gap:12px} /* ===== SPECS ===== */ .specs{border:1px solid var(--line);background:var(--night)} .spec{display:flex;justify-content:space-between;gap:14px;padding:13px 20px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase} .spec:last-child{border-bottom:0} .spec b{color:var(--brass);font-weight:700} .spec span{color:var(--muted)} /* ===== FOOTER ===== */ .foot{border-top:1px solid var(--line);margin-top:70px;background:var(--surface)} .foot-in{max-width:var(--wrap);margin:0 auto;padding:42px 28px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px} @media (max-width:820px){.foot-in{grid-template-columns:1fr 1fr;gap:34px 26px}} @media (max-width:560px){ .foot{margin-top:54px} .foot-in{grid-template-columns:1fr;gap:32px;padding:38px 24px} .foot a{margin:0;padding:11px 0;border-bottom:1px solid var(--surface)} .foot .h{margin:0 0 4px} .legal{padding:16px 24px;gap:6px 16px;flex-direction:column} } .foot .h{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);font-weight:700;margin:0 0 12px} .foot a{display:block;color:var(--muted);text-decoration:none;font-size:14px;margin:0 0 8px} .foot a:hover{color:var(--ink)} .foot p{color:var(--muted);font-size:14px;margin:0;max-width:26rem} .foot .sig{margin:0 0 14px} .foot .sig img{width:200px;height:auto;max-width:100%} .legal{border-top:1px solid var(--line);padding:16px 28px;max-width:var(--wrap);margin:0 auto;font-size:12.5px;color:var(--muted);display:flex;gap:18px;flex-wrap:wrap} /* ===== ARTICLES (blog) ===== */ .artwrap{max-width:var(--wrap);margin:0 auto;padding:0 28px} .arthead{max-width:760px;margin:0 auto;padding:46px 0 8px} .arthead .kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);font-weight:700;margin:0 0 14px} .arthead h1{font-size:clamp(27px,3.4vw,40px);line-height:1.14;text-transform:uppercase;letter-spacing:.01em;font-weight:800;margin:0 0 18px;max-width:none} .arthead .sub{color:var(--muted);font-weight:300;font-size:18px;margin:0;max-width:56ch} .art{max-width:760px;margin:0 auto;padding:8px 0 20px} .art p{color:var(--ink2);font-weight:300;font-size:17px;line-height:1.8;margin:0 0 1.35em} .art .ap-lead{font-size:19px;line-height:1.65;color:var(--muted);border-left:2px solid var(--brass);padding-left:22px;margin:0 0 44px} .art h2{font-size:clamp(19px,2.2vw,23px);text-transform:uppercase;letter-spacing:.05em;font-weight:800;margin:56px 0 18px;padding-top:22px;position:relative} .art h2:first-child{margin-top:24px} .art h2::before{content:"";position:absolute;top:0;left:0;width:46px;height:2px;background:var(--brass)} .art h3{font-size:17px;font-weight:600;color:var(--ink);margin:34px 0 8px;line-height:1.45} .art strong{color:var(--ink);font-weight:600} .art em{color:var(--brass);font-style:italic} .art a{color:var(--brass)} .art ol,.art ul{margin:0 0 1.4em;padding-left:1.3em;color:var(--ink2);font-weight:300} .art li{margin-bottom:.7em;line-height:1.75} .art li strong{color:var(--ink)} .art figure{margin:44px 0} .art figure img,.art figure picture{display:block;width:100%} .art figure img{padding:10px;border:1px solid var(--line);background:var(--surface)} .art figcaption{font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-top:14px} .art .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:44px 0} .art .trio figure{margin:0} .art .trio figcaption{font-size:11px;letter-spacing:.09em;margin-top:11px;line-height:1.5} .art .trio img{padding:6px} @media (max-width:720px){.art .trio{grid-template-columns:1fr;gap:26px}} .art .ap-key{background:var(--surface2);border-left:2px solid var(--brass);padding:26px 30px;margin:44px 0} .art .ap-key p{margin:0;color:var(--ink)} .art .ap-key b{display:block;font-family:var(--mono);font-weight:700;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:10px} .art .ap-tblwrap{overflow-x:auto;margin:40px 0;position:relative; -webkit-overflow-scrolling:touch;scrollbar-width:thin} .art table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px} @media (max-width:720px){ .art .ap-tblwrap{margin:32px 0 12px; -webkit-mask-image:linear-gradient(to right,var(--ink) 88%,rgba(var(--ombre),.10)); mask-image:linear-gradient(to right,var(--ink) 88%,rgba(var(--ombre),.10))} .art .ap-tblwrap::after{content:"Faites glisser le tableau \2192";display:block; position:sticky;left:0;padding:10px 2px 0;font-family:var(--mono); font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);opacity:.75} .art table{font-size:14px;min-width:520px} .art th,.art td{padding:12px 10px} } .art th{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);font-weight:700;text-align:left;padding:14px 12px;border-bottom:1px solid var(--line)} .art td{padding:14px 12px;border-bottom:1px solid var(--line);color:var(--ink2);font-weight:300} .art tbody tr:last-child td{border-bottom:0} .art td:first-child{color:var(--ink);font-weight:600} .art .ap-cap{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin:14px 0 0} .art .ap-faq{margin-top:60px;padding-top:10px;border-top:1px solid var(--line)} .art .ap-cta{border:1px solid var(--brass-deep);background:linear-gradient(160deg,var(--surface2),var(--surface));padding:44px 34px;margin:60px 0 0;text-align:center} .art .ap-cta p{max-width:44ch;margin:0 auto;color:var(--ink2)} .art .ap-cta strong{display:block;font-weight:640;letter-spacing:-.02em;color:var(--ink);font-size:clamp(21px,3vw,29px);line-height:1.2;margin-bottom:16px;text-transform:none;text-wrap:balance} .art .ap-cta a.btn{color:var(--sur-brass);text-decoration:none} .art .ap-cta a.btn:hover{color:var(--sur-brass)} .art .ap-cta .ap-btn{margin:26px auto 0} .art .ap-sign{margin-top:44px;padding-top:22px;border-top:1px solid var(--line)} .art .ap-sign p{font-size:14.5px;color:var(--muted);margin:0} @media (max-width:640px){.art p{font-size:16px}.art .ap-lead{font-size:17px;padding-left:16px}} /* ===== INDEX BLOG ===== */ .blogbar{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:center;justify-content:space-between; padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:26px} .filters{display:flex;flex-wrap:wrap;gap:8px} .chip{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase; font-weight:600;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:2px; padding:9px 14px;cursor:pointer;line-height:1;transition:.15s} .chip span{opacity:.55;margin-left:5px;font-size:11px} .chip:hover{border-color:var(--brass-deep);color:var(--ink)} .chip.on{background:var(--brass);border-color:var(--brass);color:var(--sur-brass)} .chip.on span{opacity:.7} .tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .tools input[type=search]{background:var(--surface);border:1px solid var(--line);color:var(--ink); font-family:var(--sys);font-size:14.5px;padding:10px 14px;border-radius:2px;min-width:230px} .tools input[type=search]::placeholder{color:var(--muted)} .tools input[type=search]:focus{outline:none;border-color:var(--brass)} #sortbtn{white-space:nowrap} .rescount{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--muted);margin:0 0 22px} .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(292px,100%),1fr));gap:26px} .card{border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;transition:.18s} .card:hover{border-color:var(--brass-deep)} .card .thumb{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--surface2)} .card .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s} .card:hover .thumb img{transform:scale(1.04)} .card .noimg{display:block;height:100%;background:linear-gradient(150deg,var(--surface2),var(--surface))} .cbody{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1} .cbody .d{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--brass);font-weight:700;margin:0 0 10px} .cbody h2{font-size:17.5px;line-height:1.28;margin:0 0 10px;text-transform:none;letter-spacing:0} .cbody h2 a{text-decoration:none} .cbody h2 a:hover{color:var(--brass)} .cbody .ex{color:var(--muted);font-weight:300;font-size:14.5px;line-height:1.6;margin:0 0 16px} .cbody .tags{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--muted);margin:auto 0 0} .nores{color:var(--muted);font-weight:300;padding:40px 0} .linkish{background:none;border:0;color:var(--brass);cursor:pointer;font:inherit;text-decoration:underline;padding:0} @media (max-width:760px){.blogbar{flex-direction:column;align-items:stretch;gap:14px} .tools{flex-direction:column;align-items:stretch;width:100%} .tools input[type=search]{width:100%;min-width:0} #sortbtn{align-self:flex-start} .cards{grid-template-columns:1fr}} /* ===== EN PRÉPARATION (correcteur) ===== */ .soon{margin-top:52px;padding-top:26px;border-top:1px solid var(--line)} .soon ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:10px 30px} .soon li{color:var(--muted);font-weight:300;font-size:15px;padding:7px 0;border-bottom:1px solid var(--surface)} .soon li b{color:var(--ink2);font-weight:600} /* ===== LE CORRECTEUR (diagnostic guidé) ===== */ .coachwrap{padding-top:6px} .coach{border:1px solid var(--brass-deep);background:linear-gradient(165deg,var(--surface2),var(--surface));padding:38px 36px 34px;max-width:820px;margin:0 auto} .coach h2{font-size:clamp(20px,2.4vw,25px);margin:0 0 10px} .coach .eyebrow{margin:0 0 12px} .coach-sub{color:var(--muted);font-weight:300;margin:0 0 30px;max-width:58ch;font-size:15.5px} .cq-q{font-size:18px;font-weight:600;color:var(--ink);margin:0 0 6px;line-height:1.4} .cq-hint{color:var(--muted);font-weight:300;font-size:14.5px;margin:0 0 18px} .cq-a{display:flex;flex-direction:column;gap:9px;margin-top:16px} .cq-a button{text-align:left;background:var(--night);border:1px solid var(--line);color:var(--ink2); font-family:var(--sys);font-size:15.5px;font-weight:400;padding:15px 18px;border-radius:2px;cursor:pointer;transition:.15s} .cq-a button:hover{border-color:var(--brass);color:var(--ink);transform:translateX(3px)} .cq-nav{margin:22px 0 0;font-size:13.5px;color:var(--muted)} .cq-v .cq-k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);font-weight:700;margin:0 0 8px} .cq-name{font-family:var(--sys);font-size:clamp(21px,2.6vw,27px);font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--ink);margin:0 0 14px;line-height:1.2} .cq-x{color:var(--ink2);font-weight:300;line-height:1.75;margin:0 0 22px;max-width:60ch} .cq-clip{width:100%;max-width:520px;display:block;border:1px solid var(--line);padding:6px;background:var(--night);margin:0 0 22px} .cq-cta{display:flex;flex-wrap:wrap;gap:12px;margin:0} @media (max-width:640px){.coach{padding:28px 20px}.cq-cta .btn{width:100%;text-align:center}} .cq-more{margin:0 0 24px} /* « Et maintenant, on vérifie » : le correcteur donne une hypothèse, la mesure la confirme. Le bloc est encadré pour se distinguer du verdict lui-même — c'est une réserve, pas une conclusion de plus. */ .cq-verif{margin:0 0 24px;padding:20px 22px;border:1px solid var(--brass); border-radius:3px;background:var(--brass-wash)} .cq-verif .cq-h{margin:0 0 10px;font-family:var(--mono);font-weight:700;font-size:11px; letter-spacing:.18em;text-transform:uppercase;color:var(--brass)} .cq-verif p{margin:0 0 10px;color:var(--ink2);font-size:15px;line-height:1.65} .cq-verif p:last-child{margin-bottom:0} .cq-verif b{color:var(--ink);font-weight:600} .cq-verif .cq-p{color:var(--muted);font-size:14px} /* ═══════════════ LA BANNIÈRE D'EN-TÊTE ═══════════════ Une photo pleine largeur, le titre posé dessus en clair. Le voile est un dégradé plutôt qu'un aplat : dense en bas où le texte se pose, léger en haut où l'image doit se voir. Un aplat assez opaque pour garantir la lecture éteindrait la photo qu'on cherche à montrer. */ .banniere{position:relative;display:grid;align-items:end;overflow:hidden; min-height:clamp(290px,40svh,440px);margin-bottom:8px;background:var(--ink)} .banniere>picture{position:absolute;inset:0} /* Uniquement la photo de fond : sans le « > picture », cette règle étirait aussi le médaillon de marque posé dans le texte. */ .banniere>picture img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;display:block} /* Le dégradé doit être dense sur TOUTE la hauteur du bloc de texte, pas seulement sous la dernière ligne. La première version s'éclaircissait à 66 % — juste là où commence le surtitre, qui passait sous le seuil de lisibilité sur sept pages sur onze. Mesuré, pas supposé. */ .banniere-voile{position:absolute;inset:0; background:linear-gradient(to top, rgba(10,13,17,.92) 0%,rgba(10,13,17,.89) 46%, rgba(10,13,17,.76) 70%,rgba(10,13,17,.42) 88%, rgba(10,13,17,.50) 100%)} .banniere-in{position:relative;z-index:2;max-width:var(--wrap);width:100%; /* Une marge haute, sinon un bloc plus grand que la hauteur minimale (le médaillon de marque, par exemple) se fait rogner par le haut. */ margin:0 auto;padding:clamp(26px,3.6vw,44px) 28px clamp(30px,4vw,48px); display:flex;align-items:flex-end;justify-content:space-between; gap:24px;flex-wrap:wrap} /* Sur la bannière, le texte est clair : on redéfinit les jetons localement plutôt que de dupliquer les règles de titre. */ .banniere .head{--ink:#ffffff;--ink2:#e6e9ed;--muted:#c8ccd2;--brass:#aeddad; max-width:46rem;padding:0;margin:0;color:#fff} .banniere .head h1{color:#fff;margin-bottom:14px; text-shadow:0 1px 22px rgba(10,13,17,.45)} .banniere .head h1 .script{color:#e6e9ed} .banniere .head .sub{color:#e6e9ed;margin:0;text-shadow:0 1px 16px rgba(10,13,17,.4)} /* Le surtitre est l'élément le plus haut du bloc, donc celui qui tombe dans la zone la plus claire du dégradé. Plutôt que d'assombrir toute la photo pour trois mots, on lui donne son propre fond : la lisibilité ne dépend alors plus du tout de l'image qui passe derrière. */ .banniere .head .eyebrow{display:inline-block;margin:0 0 16px; color:#cfe7cf;background:rgba(10,13,17,.82); padding:7px 13px;border-radius:980px; font-size:11.5px;letter-spacing:.13em} /* Le médaillon de marque, dans la bannière. Il porte son propre fond noir : il reste lisible quelle que soit la photo qui passe derrière — c'était tout le problème de l'ancien logo, dessiné en blanc sur transparence et donc invisible dès que le fond s'éclaircissait. */ .ban-logo{width:clamp(64px,7vw,86px);height:auto;margin:0 0 18px;display:block; border-radius:50%;box-shadow:0 4px 20px rgba(10,13,17,.5)} @media(max-width:820px){.ban-logo{width:60px;margin-bottom:14px}} .banniere-leg{margin:0;flex:none;font-family:var(--mono);font-size:10.5px; letter-spacing:.16em;text-transform:uppercase;color:#d3d7dc;padding-bottom:4px} @media(max-width:820px){ .banniere{min-height:clamp(240px,36svh,340px)} .banniere-in{padding:clamp(22px,4vw,30px) 24px clamp(24px,4vw,34px);flex-direction:column; align-items:flex-start;gap:12px} .banniere-leg{padding-bottom:0} } @media(prefers-reduced-motion:no-preference){ .banniere .head{animation:ban-entre .75s cubic-bezier(.2,.7,.3,1) both} } @keyframes ban-entre{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} /* ═══════════════ LES PHOTOS PRODUIT ═══════════════ Les visuels fournis par les fabricants. Chaque légende porte le crédit : ce sont leurs photographies, pas les nôtres, et un site qui les affiche sans le dire ne rend service à personne. */ .produit-vue{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden; background:var(--surface2)} .produit-vue img{display:block;width:100%} .produit-trois{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0} .produit-trois.deux{grid-template-columns:repeat(2,minmax(0,1fr))} .produit-trois figure{margin:0;border:1px solid var(--line);border-radius:14px; overflow:hidden;background:var(--surface2)} .produit-trois img{display:block;width:100%;aspect-ratio:1;object-fit:cover} /* Les captures de logiciel ont le rapport de forme de l'écran, pas celui d'un packshot : les forcer au carré couperait les valeurs affichées. */ .produit-trois.ecrans img{aspect-ratio:4/3} .produit figcaption{padding:14px 18px;font-size:14.5px;color:var(--ink2); border-top:1px solid var(--line);line-height:1.5} .produit figcaption span{display:block;margin-top:5px;font-family:var(--mono); font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)} @media(max-width:760px){ .produit-trois{grid-template-columns:1fr;gap:14px} .produit figcaption{padding:12px 15px;font-size:14px} } /* ═══════════════ LA CHAÎNE DE MESURE ═══════════════ Quatre boîtes grises côte à côte ne disaient rien de plus que leur titre. Chaque outil porte maintenant la QUESTION à laquelle il répond : c'est ce qui distingue une liste de matériel d'une méthode. */ /* La feuille partagée n'a pas de .sec.tint — c'est une convention de la page d'accueil. On pose donc le fond ici, en débordant la gouttière pour que la bande aille d'un bord à l'autre. */ .chaine{background:var(--surface);border-top:1px solid var(--line); border-bottom:1px solid var(--line);max-width:none; padding-left:max(28px,calc((100vw - var(--wrap))/2 + 28px)); padding-right:max(28px,calc((100vw - var(--wrap))/2 + 28px)); padding-bottom:clamp(46px,6vw,76px)} .outils{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 clamp(20px,2.6vw,34px);margin-top:34px} .outil{padding-top:18px;border-top:2px solid var(--brass);display:flex;flex-direction:column} .outil .k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--brass);font-weight:700;margin:0 0 7px} .outil h3{font-size:16.5px;margin:0 0 12px;line-height:1.3} /* La question, en tête : c'est elle qui justifie l'outil. */ .outil .q{font-weight:600;color:var(--ink);font-size:15px;line-height:1.45;margin:0 0 10px} .outil p{margin:0 0 12px;color:var(--muted);font-size:14.5px;line-height:1.6} .outil p b{color:var(--ink2);font-weight:600} .outil .go{margin-top:auto;font-family:var(--mono);font-size:11.5px;font-weight:700; letter-spacing:.11em;text-transform:uppercase;color:var(--brass);text-decoration:none} .outil .go::after{content:" →"} .outil .go:hover{color:var(--brass-deep)} @media(max-width:980px){.outils{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 26px}} @media(max-width:560px){.outils{grid-template-columns:1fr;gap:26px}} .chaine-preuve{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,54px); align-items:center;margin-top:clamp(34px,4.5vw,54px); padding-top:clamp(26px,3.5vw,40px);border-top:1px solid var(--line)} .chaine-logos{display:flex;align-items:center;gap:clamp(26px,4vw,54px);flex-wrap:wrap} /* Les trois logos n'ont pas le même rapport de forme : les caler sur une hauteur commune rend TRACKMAN quatre fois plus large que CAPTO. On les cale donc sur une largeur optique, hauteur plafonnée. */ .chaine-logos img{width:auto;max-height:30px;opacity:.72} .chaine-logos img[alt="TrackMan"]{width:158px;max-height:none} .chaine-logos img[alt="CAPTO"]{width:88px;max-height:none} .chaine-logos img[alt="MINA"]{width:auto;max-height:52px} /* Le logo MINA est maintenant celui de la marque, en couleur : plus d'inversion. Il est carré là où les deux autres sont des signatures horizontales, d'où une largeur propre. */ .chaine-logos img.inv{filter:none;opacity:.9} .chaine-preuve .photo{border-radius:12px} @media(max-width:820px){ .chaine-preuve{grid-template-columns:1fr} .chaine-preuve .photo{max-width:320px!important} .chaine-logos img{height:28px} } /* ===== LES QUATRE PILIERS, en une ligne ===== Quatre cartes pleine largeur repoussaient tout le contenu utile sous la ligne de flottaison. La même information tient ici sur une ligne, avec des numéros qui la structurent sans la gonfler. */ .quatre-lignes{list-style:none;counter-reset:pl;padding:0;margin:0; display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 26px} .quatre-lignes li{counter-increment:pl;position:relative; padding:16px 0 0;border-top:2px solid var(--brass)} .quatre-lignes li::before{content:"0" counter(pl);display:block; font-family:var(--mono);font-size:11.5px;letter-spacing:.16em; color:var(--brass);font-weight:700;margin-bottom:8px} .quatre-lignes b{display:block;font-size:16px;font-weight:640; letter-spacing:-.012em;line-height:1.3;margin-bottom:5px} .quatre-lignes span{display:block;color:var(--muted);font-size:14px;line-height:1.55} @media(max-width:900px){.quatre-lignes{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 22px}} @media(max-width:560px){.quatre-lignes{grid-template-columns:1fr;gap:20px}} /* « Sans radar ni capteur » : ce qu'on peut observer soi-même. Ce bloc vient avant celui de la mesure — d'abord ce que le joueur peut faire seul, ensuite ce que la mesure ajoute. L'ordre inverse ferait de l'outil une brochure. */ .cq-seul{margin:0 0 20px;padding:20px 22px;border-left:2px solid var(--line); background:var(--surface2)} .cq-seul .cq-h{margin:0 0 10px;font-family:var(--mono);font-weight:700;font-size:11px; letter-spacing:.18em;text-transform:uppercase;color:var(--ink2)} .cq-seul .cq-i{margin:0 0 12px;color:var(--muted);font-size:14px;line-height:1.6} .cq-seul ul{margin:0;padding-left:1.1em;color:var(--ink2)} .cq-seul li{margin-bottom:9px;line-height:1.65;font-size:15px} .cq-seul li:last-child{margin-bottom:0} /* « Un joueur a rarement un seul défaut » : on repart de l'arbre là où il n'est pas encore allé, plutôt que de le renvoyer au début. */ .cq-suite{margin:26px 0 0;padding-top:22px;border-top:1px solid var(--line)} .cq-suite .cq-h{margin:0 0 8px;font-family:var(--mono);font-weight:700;font-size:11px; letter-spacing:.18em;text-transform:uppercase;color:var(--brass)} .cq-suite .cq-i{margin:0 0 16px;color:var(--muted);font-size:14px;line-height:1.6} .cq-sb{display:flex;flex-wrap:wrap;gap:9px} .cq-sb button{font:inherit;font-size:14px;font-weight:500;color:var(--ink2);cursor:pointer; background:var(--surface2);border:1px solid var(--line);border-radius:980px;padding:10px 18px; transition:.15s} .cq-sb button:hover{border-color:var(--brass);color:var(--brass)} /* ===== LA BIBLIOTHÈQUE, en bas de la page Méthode ===== */ .biblio{list-style:none;padding:0;margin:26px 0 0; display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:0 30px} .biblio li{border-bottom:1px solid var(--line)} .biblio a{display:flex;align-items:baseline;justify-content:space-between;gap:16px; padding:14px 2px;text-decoration:none;transition:padding-left .2s ease,color .2s ease} .biblio a:hover{padding-left:8px} .biblio b{font-weight:600;font-size:15.5px;color:var(--ink);line-height:1.35} .biblio a:hover b{color:var(--brass)} .biblio span{flex:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--muted)} .cq-more .cq-h{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);font-weight:700;margin:22px 0 10px} .cq-more ul{margin:0;padding-left:1.1em;color:var(--ink2);font-weight:300} .cq-more li{margin-bottom:8px;line-height:1.65;font-size:15px} .cq-more li b{color:var(--ink);font-weight:600} .formnote{font-size:13.5px;color:var(--muted);font-weight:300;line-height:1.6;margin:4px 0 0} .formnote a{color:var(--brass);text-decoration:none;border-bottom:1px solid rgba(var(--accent),.30)} /* ===== LES PARCOURS ===== */ .parcours{list-style:none;padding:0;margin:26px 0 24px;display:grid; grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:0 30px} .parcours li{display:flex;align-items:baseline;gap:10px; padding:13px 0;border-bottom:1px solid var(--line)} .parcours li::before{content:"";width:5px;height:5px;flex:none;border-radius:50%; background:var(--brass);transform:translateY(-3px)} .parcours b{font-family:var(--mono);font-weight:700;font-size:13px; letter-spacing:.09em;text-transform:uppercase;color:var(--ink)} .parcours span{font-size:13px;color:var(--muted);font-weight:300;white-space:nowrap} /* ===== LISTE DÉTAILLÉE (page CAPTO) ===== */ .liste{list-style:none;padding:0;margin:0 0 22px} .liste li{padding:0 0 14px 18px;margin:0 0 14px;border-bottom:1px solid var(--line);position:relative} .liste li:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0} .liste li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px; background:var(--brass);border-radius:50%} .liste b{display:block;font-family:var(--mono);font-weight:700; font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:5px} .liste span{display:block;color:var(--muted);font-weight:300;font-size:15px;line-height:1.6} /* ===== LE GUIDE ===== */ .guide-dl{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0} .guide-dl span{font-family:var(--mono);font-size:11.5px; letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .guide-som{list-style:none;counter-reset:g;padding:0;margin:0 0 26px} .guide-som li{counter-increment:g;position:relative;padding:0 0 14px 34px; margin:0 0 14px;border-bottom:1px solid var(--line)} .guide-som li:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0} .guide-som li::before{content:counter(g);position:absolute;left:0;top:-2px; font-family:var(--mono);font-weight:700;font-size:17px;color:var(--brass)} .guide-som b{display:block;font-family:var(--mono);font-weight:700; font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:3px} .guide-som span{display:block;color:var(--muted);font-weight:300;font-size:15px;line-height:1.5} @media (max-width:820px){.guide-dl{justify-content:center}} /* ===== FILET DE SÉCURITÉ MOBILE ===== */ img,picture,video,svg{max-width:100%} img{height:auto} .nav .brand img{height:52px} form,input,select,textarea{max-width:100%} .stack input,.stack select,.stack textarea{width:100%} .stack{width:100%} /* ═══ RELIEF : les blocs réagissent au survol ═══ Ajouté avec la direction artistique claire. Tout est désactivé si le visiteur a demandé de réduire les animations. */ .door,.tarif,.day,.daterow,.chap>picture,.gal a,.photo{ transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease, background .28s ease; } .door:hover,.tarif:hover,.day:hover{ transform:translateY(-3px); border-color:var(--brass); box-shadow:0 1px 2px rgba(var(--ombre),.05),0 18px 36px -18px rgba(var(--accent),.42); } .daterow:hover{background:var(--surface)} .photo,.gal img{transition:transform .5s cubic-bezier(.2,.7,.3,1)} .gal a,.chap>picture,.band-img{overflow:hidden;border-radius:12px;display:block} .gal a:hover img,.chap>picture:hover img{transform:scale(1.035)} .btn{transition:background .2s ease,color .2s ease,transform .2s ease} .btn:active{transform:translateY(1px)} a.go{transition:gap .2s ease,color .2s ease} @media (prefers-reduced-motion:reduce){ .door,.tarif,.day,.daterow,.photo,.gal img,.btn{transition:none!important;transform:none!important} .door:hover,.tarif:hover,.day:hover{transform:none} } /* ═══ CALENDRIER DES STAGES ═══ */ .cal{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid var(--line)} .cal .ses{ display:grid;align-items:center;gap:6px 22px; /* numéro · quand · où · combien · bouton */ grid-template-columns:auto minmax(0,1fr) minmax(0,1.05fr) auto auto; padding:18px 4px;border-bottom:1px solid var(--line2); transition:background .25s ease; } .cal .ses:hover{background:var(--surface)} .cal .no{ font-family:var(--mono);font-size:12px;color:var(--brass);font-weight:600; letter-spacing:.06em;min-width:22px; } .cal .qd,.cal .ou,.cal .px{display:flex;flex-direction:column;min-width:0} /* Le tarif : lisible, mais il ne doit pas dominer la ligne. */ .cal .px{text-align:right;white-space:nowrap} .cal .px b{font-size:15px;font-variant-numeric:tabular-nums} .cal .px small a{color:var(--brass);text-decoration:none;border-bottom:1px solid rgba(var(--accent),.3)} .cal b{font-size:16.5px;font-weight:640;letter-spacing:-.012em;line-height:1.25} .cal small{font-size:13.5px;color:var(--muted);margin-top:3px;line-height:1.4} .cal .ses .btn{justify-self:end;white-space:nowrap} @media (max-width:980px){ .cal .ses{grid-template-columns:auto minmax(0,1fr);gap:4px 16px;padding:20px 4px} .cal .no{grid-row:span 4;align-self:start;padding-top:3px} .cal .px{text-align:left;margin-top:6px} .cal .ses .btn{justify-self:start;margin-top:12px} } /* ═══════════════════════════════════════════════════════════════════════ LA TRAME COMMUNE Ce que les pages qui défilent — Histoire, Méthode, Cours, Stages, Simulateur, G.Spot — apportent au reste du site : un décor photo fixé derrière la page, un écran d'ouverture, et des blocs qui montent au défilement. Les pages classiques gardent leur contenu et leurs composants ; seule la trame devient la même. Deux règles tiennent ce bloc : — rien ne s'active sans le script (préfixe .js), pour qu'une page reste une page normale si le JavaScript ne s'exécute pas ; — toute animation s'efface sous prefers-reduced-motion. ═══════════════════════════════════════════════════════════════════════ */ /* ---------- le décor, fixé derrière toute la page ---------- */ .fonds{display:none} .js .fonds{ display:block;position:fixed;inset:0;z-index:0;pointer-events:none; background: radial-gradient(1100px 560px at 50% -12%,rgba(var(--accent),.09),transparent 62%), radial-gradient(760px 460px at 86% 112%,rgba(var(--accent),.07),transparent 60%), var(--night); } /* La grille : un repère d'écran de démarrage, qui s'efface dès qu'un contenu prend la main. */ .js .fonds::after{ content:"";position:absolute;inset:0;opacity:.5;transition:opacity .9s ease; background-image: linear-gradient(rgba(var(--accent),.07) 1px,transparent 1px), linear-gradient(90deg,rgba(var(--accent),.07) 1px,transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(circle at 50% 40%,#000 0%,transparent 72%); mask-image:radial-gradient(circle at 50% 40%,#000 0%,transparent 72%); } .js .fonds.dedans::after{opacity:0} .fond{position:absolute;inset:0} .fond img{ width:100%;height:100%;object-fit:cover; /* Flou volontaire : le décor donne l'ambiance, la photo nette est dans la colonne. Il rend aussi la définition du fichier sans importance. */ filter:blur(30px) saturate(.5) brightness(1.16) contrast(.92); transform:scale(1.24); } .js .fond img{animation:derive 40s cubic-bezier(.25,.1,.25,1) both} @keyframes derive{ from{transform:scale(1.18) translate3d(0,0,0)} to{transform:scale(1.34) translate3d(-2.4%,-1.8%,0)} } /* Opaque du côté du texte, plus léger du côté de la photo : le décor se devine sans jamais disputer la lecture. Et jamais du blanc pur. */ .js .fonds .voile-i{ position:absolute;inset:0; background:linear-gradient(100deg, rgba(255,255,255,.94) 0 34%, rgba(255,255,255,.80) 68%, rgba(255,255,255,.70)); } @media(max-width:860px){ .js .fonds .voile-i{background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(255,255,255,.95))} } html.sombre .js .fonds .voile-i, .js html.sombre .fonds .voile-i{ background:linear-gradient(100deg,rgba(10,13,17,.94) 0 34%,rgba(10,13,17,.82) 68%,rgba(10,13,17,.72))} /* Le contenu passe devant le décor. */ .nav,main,.foot,.ouverture{position:relative;z-index:1} /* ---------- l'écran d'ouverture ---------- */ .ouverture{ display:grid;align-content:center;justify-items:center;text-align:center; padding-block:clamp(56px,10vw,110px); padding-left:max(20px,calc((100vw - var(--wrap))/2)); padding-right:max(20px,calc((100vw - var(--wrap))/2)); } .js .ouverture{min-height:calc(100svh - 68px)} .ouverture-in{max-width:46rem;width:100%} .ouverture .head{text-align:center} .ouverture .eyebrow{color:var(--brass);margin:0 0 20px} .ouverture h1{font-size:clamp(32px,6vw,62px);letter-spacing:-.03em;line-height:1.06; text-wrap:balance;margin:0} /* Sur les pages qui défilent, la seconde ligne du titre est plus claire et plus légère. Ici « .script » joue ce rôle : on l'aligne dessus. */ .ouverture h1 .script{display:block;color:var(--ink2);font-weight:500; font-size:.58em;margin-top:14px;letter-spacing:-.018em} .ouverture .sub{margin:26px auto 0;color:var(--ink2);max-width:40rem; font-size:clamp(16px,1.9vw,19px)} .ouverture .ban-logo{width:clamp(52px,6vh,68px);height:auto;margin:0 auto 20px;display:block} /* La barre qui se remplit sous le titre : purement décorative, elle ne retient jamais le contenu. */ .charge{width:min(320px,72vw);height:3px;margin:30px auto 0;background:var(--surface); border-radius:3px;overflow:hidden} .charge i{display:block;height:100%;width:0;background:var(--brass);border-radius:3px} .js .charge i{animation:remplir 1s cubic-bezier(.5,.05,.2,1) .25s both} @keyframes remplir{from{width:0}to{width:100%}} .ouverture .aide{margin:24px 0 0;display:flex;align-items:center;justify-content:center; gap:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--muted)} .fleche{width:9px;height:9px;flex:none;border-right:1.5px solid var(--brass); border-bottom:1.5px solid var(--brass);transform:rotate(45deg) translate(-1px,-1px)} .js .fleche{animation:respire 2.1s ease-in-out infinite} @keyframes respire{ 0%,100%{transform:rotate(45deg) translate(-3px,-3px);opacity:.55} 50%{transform:rotate(45deg) translate(1px,1px);opacity:1}} /* ---------- ce qui monte au défilement ---------- */ .js .anime{opacity:0;transform:translateY(20px); transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.3,1)} .js .anime.vu{opacity:1;transform:none} /* Repli : si l'observation d'intersection n'existe pas, rien n'est caché. */ .js.brut .anime{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .js .fond img{animation:none;transform:scale(1.24)} .charge i{width:100%;animation:none} .js .fleche{animation:none} .js .anime{opacity:1;transform:none} }