/* ============================================================ CULTURE PARKOUR - feuille unique du site vitrine 1. regles de base 2. @keyframes 3. @media (du plus large au plus etroit) 4. variantes par page (classe sur ). L'ordre compte : un @media place avant sa regle de base ne surcharge rien. ============================================================ */ :root{ --bg:#05070A; --surface:#0D1117; --surface-2:#131A22; --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.18); --ink:#FFFFFF; --ink-2:rgba(255,255,255,.9); --ink-3:rgba(255,255,255,.68); --cyan:#00B4DB; --green:#00F3A6; --magenta:#FD05B0; --pink:#FF4688; --blue-deep:#002390; --blue-mid:#0079A9; --blue-dark:#005275; --purple:#570094; --lime:#D9F300; --display:'Bai Jamjuree',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; --gutter:clamp(20px,5vw,80px); --section-y:clamp(80px,10vh,140px); --maxw:1440px; } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--display); font-weight:300; font-size:clamp(16px,1.05vw,17px); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; } img{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } :focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:2px; } ::selection{ background:var(--cyan); color:#05070A; } .eyebrow{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); padding:7px 14px 7px 12px; border-radius:999px; border:1px solid color-mix(in srgb,currentColor 34%,transparent); background:color-mix(in srgb,currentColor 9%,transparent); } .eyebrow::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; flex:none; } .eyebrow:hover{ border-color:rgba(255,255,255,.26); background:rgba(255,255,255,.06); } .h-xl{ font-weight:700; text-transform:uppercase; font-size:clamp(38px,7.4vw,104px); line-height:.92; letter-spacing:-.03em; margin:0; } .h-lg{ font-weight:700; text-transform:uppercase; font-size:clamp(30px,3.6vw,48px); line-height:1.06; letter-spacing:-.025em; margin:0; } .h-md{ font-weight:600; text-transform:uppercase; font-size:clamp(26px,2.6vw,40px); line-height:1.08; letter-spacing:-.015em; margin:0; } .lead{ font-size:clamp(18px,1.35vw,20px); line-height:1.55; color:var(--ink-2); max-width:62ch; } .dim{ color:var(--ink-2); } .thin{ font-weight:200; } .shell{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } .section{ padding-block:var(--section-y); position:relative; } .rule{ height:1px; background:var(--line); border:0; margin:0; } .btn{ display:inline-flex; align-items:center; gap:12px; padding:15px 26px; border-radius:2px; font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; transition:transform .35s cubic-bezier(.16,1,.3,1),background .3s,color .3s,border-color .3s; will-change:transform; } .btn .arw{ transition:transform .35s cubic-bezier(.16,1,.3,1); } .btn:hover .arw{ transform:translateX(5px); } .btn-primary{ background:var(--blue-deep); color:#fff; } .btn-primary:hover{ background:var(--blue-mid); } .btn-ghost{ border:1px solid var(--line-strong); color:var(--ink); } .btn-ghost:hover{ border-color:var(--cyan); color:var(--cyan); } .btn-magenta{ background:var(--magenta); color:#fff; } .btn-magenta:hover{ background:var(--pink); } .trace{ position:fixed; left:calc(var(--gutter)*.42); top:0; width:60px; height:100vh; z-index:2; pointer-events:none; mix-blend-mode:screen; } .trace path{ fill:none; stroke-width:1.4; stroke-linecap:round; stroke-dasharray:1200; stroke-dashoffset:1200; } .trace .tick{ fill:var(--cyan); opacity:0; } .hdr{ position:fixed; inset:0 0 auto 0; z-index:60; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px var(--gutter); transition:background .4s,border-color .4s,padding .4s; border-bottom:1px solid transparent; } .hdr.is-stuck{ background:rgba(5,7,10,.82); backdrop-filter:blur(16px); border-bottom-color:var(--line); padding-block:12px; } .hdr__logo img{ height:26px; width:auto; object-fit:contain; object-position:left center; } .nav{ display:flex; align-items:center; gap:4px; } .nav a{ position:relative; padding:9px 14px; font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2); transition:color .3s; } .nav a::after{ content:""; position:absolute; left:14px; right:14px; bottom:4px; height:1px; background:var(--cyan); transform:scaleX(0); transform-origin:left; transition:transform .38s cubic-bezier(.16,1,.3,1); } .nav a:hover{ color:var(--ink); } .nav a:hover::after{ transform:scaleX(1); } /* .nav a.is-elite : voir plus bas, apres [aria-current] (meme specificite) */ .hdr__cta{ display:flex; align-items:center; gap:12px; } .burger{ display:none; width:40px; height:40px; border:0; background:none; padding:0; } .burger span{ display:block; width:22px; height:2px; border-radius:2px; background:var(--ink); margin:0 auto; transition:transform .45s cubic-bezier(.16,1,.3,1),width .3s ease; } .burger span + span{ margin-top:6px; width:14px; } .burger:hover span + span{ width:22px; } .burger[aria-expanded="true"] span{ transform:translateY(4px) rotate(45deg); } .burger[aria-expanded="true"] span + span{ width:22px; transform:translateY(-4px) rotate(-45deg); } .hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; padding-top:clamp(132px,17vh,200px); } .hero__media{ position:absolute; inset:0; z-index:0; } .hero__media img, .hero__media video{ width:100%; height:100%; object-fit:cover; object-position:center 30%; filter:saturate(.75) contrast(1.06); } .hero__scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(5,7,10,.86) 0%,rgba(5,7,10,.24) 34%,rgba(5,7,10,.72) 74%,var(--bg) 100%),radial-gradient(120% 80% at 12% 92%,rgba(0,35,144,.66),transparent 62%); } .hero__grain{ position:absolute; inset:0; z-index:2; opacity:.16; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .hero__inner{ position:relative; z-index:3; padding-bottom:clamp(28px,5vh,56px); } .hero__kicker{ font-family:var(--mono); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-2); margin-bottom:22px; } .hero__kicker b{ color:var(--cyan); font-weight:500; } .hero h1{ margin:0; } .hero h1 .l1{ display:block; font-weight:200; font-size:clamp(26px,3.4vw,50px); letter-spacing:.02em; text-transform:uppercase; line-height:1.05; color:var(--ink-2); } .hero h1 .l2{ display:block; font-weight:700; text-transform:uppercase; font-size:clamp(52px,11.5vw,178px); line-height:.84; letter-spacing:-.045em; margin-top:.06em; } .hero h1 .amp{ color:var(--cyan); font-weight:200; } .hero__foot{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:28px; margin-top:34px; } .hero__foot p{ margin:0; max-width:44ch; font-size:16px; color:var(--ink-2); } .hero__actions{ display:flex; flex-wrap:wrap; gap:12px; } .scrollcue{ font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:10px; } .scrollcue i{ display:block; width:1px; height:34px; background:linear-gradient(var(--cyan),transparent); } .doors{ position:relative; z-index:3; display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); background:rgba(5,7,10,.55); backdrop-filter:blur(6px); } .door{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:190px; padding:22px var(--gutter) 22px 22px; border-right:1px solid var(--line); overflow:hidden; isolation:isolate; } .door:last-child{ border-right:0; } .door__bg{ position:absolute; inset:0; z-index:-2; opacity:0; background-size:cover; background-position:center; transform:scale(1.12); transition:opacity .55s,transform .9s cubic-bezier(.16,1,.3,1); } .door::after{ content:""; position:absolute; inset:0; z-index:-1; opacity:0; background:linear-gradient(180deg,rgba(5,7,10,.25),rgba(5,7,10,.92)); transition:opacity .55s; } .door:hover .door__bg{ opacity:.55; transform:scale(1); } .door:hover::after{ opacity:1; } .door__num{ font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; color:var(--ink-3); margin-bottom:auto; } .door__title{ font-weight:600; text-transform:uppercase; font-size:clamp(15px,1.35vw,20px); line-height:1.05; letter-spacing:-.01em; } .door__desc{ font-size:16px; color:var(--ink-3); margin:8px 0 0; max-height:0; opacity:0; overflow:hidden; transition:max-height .5s cubic-bezier(.16,1,.3,1),opacity .4s; } .door:hover .door__desc{ max-height:60px; opacity:1; } .door__bar{ position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--cyan); transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.16,1,.3,1); } .door:hover .door__bar{ transform:scaleX(1); } .door[data-accent="magenta"] .door__bar{ background:var(--magenta); } .door[data-accent="lime"] .door__bar{ background:var(--lime); } .door[data-accent="green"] .door__bar{ background:var(--green); } .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line); } .stat{ background:var(--bg); padding:clamp(28px,3.4vw,48px) clamp(18px,2vw,32px); } .stat__n{ font-family:var(--display); font-weight:700; letter-spacing:-.035em; font-size:clamp(44px,5.6vw,88px); line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; } .stat:nth-child(1) .stat__n{ color:var(--cyan); } .stat:nth-child(2) .stat__n{ color:var(--green); } .stat__l{ font-size:16px; color:var(--ink-2); margin-top:12px; max-width:26ch; line-height:1.45; } .split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,88px); align-items:center; } .figure{ position:relative; overflow:hidden; border-radius:2px; } .figure img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.16,1,.3,1); } .figure:hover img{ transform:scale(1.04); } .figure__cap{ position:absolute; left:0; bottom:0; padding:12px 16px; background:rgba(5,7,10,.78); backdrop-filter:blur(8px); font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); } .prose p{ color:var(--ink-2); } .prose p + p{ margin-top:1.1em; } .quote{ font-weight:300; font-size:20px; line-height:1.5; letter-spacing:0; color:var(--ink); margin:0 0 26px; padding-left:20px; border-left:3px solid var(--blue-deep); } .courses{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); } .course{ background:var(--surface); padding:clamp(24px,2.4vw,36px); display:flex; flex-direction:column; min-height:340px; transition:background .4s; position:relative; overflow:hidden; } .course:hover{ background:var(--surface-2); } .course__age{ font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan); margin-bottom:16px; } .course:nth-child(2) .course__age{ color:var(--green); } .course:nth-child(3) .course__age{ color:var(--blue-mid); } .course:nth-child(4) .course__age{ color:var(--lime); } .course h3{ font-weight:600; text-transform:uppercase; font-size:22px; line-height:1.2; letter-spacing:-.01em; margin:0 0 16px; } .course ul{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:7px; } .course li{ font-size:16px; color:var(--ink-2); padding-left:16px; position:relative; } .course li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:1px; background:var(--ink-3); } .course__goal{ font-size:16px; color:var(--ink-2); margin:0 0 auto; } .course__dur{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:var(--ink-3); margin-top:26px; padding-top:16px; border-top:1px solid var(--line); } .bands{ display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; } .band{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; padding:8px 14px; border:1px solid var(--line-strong); border-radius:999px; color:var(--ink-2); display:flex; align-items:center; gap:9px; } .band i{ width:7px; height:7px; border-radius:50%; background:currentColor; } .band:nth-child(1) i{ background:#FFFFFF; } .band:nth-child(2) i{ background:#F4571E; } .band:nth-child(3) i{ background:#17C964; } .band:nth-child(4) i{ background:#1D4ED8; } .band:nth-child(5) i{ background:#E5322D; } .band:nth-child(6) i{ background:#8B2FD6; } .join{ scroll-margin-top:104px; position:relative; background:var(--surface); border-block:1px solid var(--line); overflow:hidden; } .join::before{ content:""; position:absolute; inset:0; background:radial-gradient(80% 120% at 78% 8%,rgba(0,35,144,.55),transparent 58%),radial-gradient(60% 100% at 4% 100%,rgba(0,35,144,.6),transparent 60%); pointer-events:none; } /* --- Inscription : deux voies, deux colonnes --------------------------- Essayer et adhérer sont deux démarches distinctes. Elles ont chacune leur colonne à poids égal ; le formulaire HelloAsso vient en dessous, sinon ses 900 px de haut écrasent la colonne "essai". */ .join .shell{ position:relative; } .ways{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(34px,4.5vw,56px); } @media (max-width:900px){ .ways{ grid-template-columns:1fr; } } .way{ background:var(--surface); padding:clamp(26px,3vw,42px); display:flex; flex-direction:column; scroll-margin-top:104px; } .way__n{ font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan); margin:0 0 16px; } .way--adhesion .way__n{ color:var(--green); } .way__t{ font-weight:600; text-transform:uppercase; font-size:clamp(24px,2.4vw,34px); line-height:1.06; letter-spacing:-.02em; margin:0 0 16px; } .way__lead{ font-size:16px; color:var(--ink-2); margin:0 0 26px; max-width:46ch; } .way .checks{ margin-bottom:26px; } .way__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:auto; } .way .partner{ margin-top:26px; } /* La décharge est le point le plus facile à rater du parcours d'essai : on la sort du texte courant et on lui donne son propre encadré. */ .doc{ display:flex; gap:16px; align-items:flex-start; margin:0 0 26px; padding:20px 22px; border:1px solid var(--line-strong); border-left:2px solid var(--cyan); border-radius:2px; background:rgba(0,35,144,.18); } .doc > .icon{ width:24px; height:24px; color:var(--cyan); flex:none; margin-top:2px; } .doc b{ display:block; font-size:16px; color:var(--ink); margin-bottom:8px; } .doc p{ margin:0 0 18px; font-size:16px; color:var(--ink-2); } @media (max-width:520px){ .doc{ flex-direction:column; gap:12px; } } /* Le formulaire d'adhésion : contenu, pas étiré sur 1440 px */ .join .widget{ max-width:760px; margin:clamp(34px,4.5vw,56px) auto 0; scroll-margin-top:104px; } .join h2{ margin:22px 0 18px; } .join .lead{ margin:0 0 30px; } .checks{ list-style:none; margin:0 0 32px; padding:0; display:flex; flex-direction:column; gap:12px; } .checks li{ display:flex; gap:12px; align-items:flex-start; font-size:16px; color:var(--ink-2); } .checks svg{ flex:none; margin-top:4px; } .widget{ border:1px solid var(--line-strong); border-radius:3px; background:rgba(5,7,10,.6); padding:26px; backdrop-filter:blur(8px); overflow:hidden; } .widget__head{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--line); } .widget__tag{ font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--green); display:flex; align-items:center; gap:8px; } .widget__tag i{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(0,243,166,.6); animation:pulse 2.4s infinite; } .widget__frame{ margin-inline:-26px; background:#fff; overflow:hidden; border-block:1px solid var(--line-strong); } .widget__frame iframe{ display:block; width:100%; height:900px; border:0; transition:height .3s ease; } .widget__fallback{ margin:0; padding:26px; color:#05070A; font-size:16px; line-height:1.5; } .widget .btn{ width:100%; justify-content:center; margin-top:18px; } .partner{ display:flex; gap:16px; align-items:center; margin-top:22px; padding-top:22px; border-top:1px solid var(--line); } .partner img{ width:44px; height:44px; object-fit:contain; flex:none; } .partner p{ margin:0; font-size:16px; color:var(--ink-3); line-height:1.5; } .partner a{ color:var(--cyan); } .fem{ position:relative; background:#08040A; overflow:hidden; } .fem::before{ content:""; position:absolute; inset:0; background:radial-gradient(70% 90% at 88% 6%,rgba(253,5,176,.20),transparent 60%),radial-gradient(60% 80% at 6% 96%,rgba(87,0,148,.34),transparent 62%); } .fem .eyebrow{ color:var(--magenta); } .fem .shell{ position:relative; } .fem__head{ display:grid; grid-template-columns:1fr auto; gap:32px; align-items:end; margin-bottom:clamp(36px,5vw,64px); } .fem h2 em{ font-style:normal; color:var(--magenta); } .gal{ display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:clamp(90px,10.5vw,132px); gap:clamp(8px,1vw,16px); } .gal figure{ margin:0; position:relative; overflow:hidden; border-radius:2px; background:var(--surface-2); } .gal figure img{ width:100%; height:118%; object-fit:cover; transition:transform 1.05s cubic-bezier(.16,1,.3,1),filter .6s; filter:grayscale(.55) contrast(1.05); } .gal figure:hover img{ transform:scale(1.05) translateY(-2%); filter:grayscale(0) contrast(1.05); } .gal figure::after{ content:""; position:absolute; inset:0; background:linear-gradient(200deg,rgba(253,5,176,.42),rgba(87,0,148,.18) 55%,transparent); mix-blend-mode:soft-light; opacity:.85; transition:opacity .6s; } .gal figure:hover::after{ opacity:.2; } .gal figure figcaption{ position:absolute; left:14px; bottom:12px; z-index:2; font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:#fff; opacity:0; transform:translateY(8px); transition:opacity .45s,transform .45s cubic-bezier(.16,1,.3,1); text-shadow:0 1px 12px rgba(0,0,0,.8); } .gal figure:hover figcaption{ opacity:1; transform:none; } .g1{ grid-column:span 5; grid-row:span 3; } .g2{ grid-column:span 4; grid-row:span 2; } .g3{ grid-column:span 3; grid-row:span 4; } .g4{ grid-column:span 4; grid-row:span 2; } .g5{ grid-column:span 5; grid-row:span 2; } .g6{ grid-column:span 4; grid-row:span 2; } .fem__note{ display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:space-between; margin-top:36px; padding-top:26px; border-top:1px solid rgba(253,5,176,.24); } .cal__head{ display:flex; flex-wrap:wrap; gap:24px; align-items:flex-end; justify-content:space-between; margin-bottom:38px; } .filters{ display:flex; flex-wrap:wrap; gap:8px; } .filter{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; padding:9px 16px; border:1px solid var(--line-strong); border-radius:999px; color:var(--ink-3); transition:color .3s,border-color .3s,background .3s; } .filter:hover{ color:var(--ink); } .filter.is-on{ background:var(--ink); color:#05070A; border-color:var(--ink); } .cal__note{ display:flex; align-items:flex-start; gap:14px; margin:0 0 30px; padding:16px 20px; border:1px solid var(--line); border-left:2px solid var(--cyan); border-radius:2px; background:var(--surface); font-size:16px; color:var(--ink-2); } .cal__note b{ color:var(--ink); font-weight:600; } .events{ border-top:1px solid var(--line); } .ev{ display:grid; grid-template-columns:152px 1fr 172px 22px; gap:24px; align-items:center; padding:22px 8px; border-bottom:1px solid var(--line); transition:background .35s,padding .35s cubic-bezier(.16,1,.3,1); } a.ev:hover{ background:rgba(255,255,255,.028); padding-inline:18px 8px; } .ev__date{ font-family:var(--mono); font-size:14px; letter-spacing:.06em; color:var(--ink); } .ev__date span{ display:block; color:var(--ink-3); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; margin-top:3px; } .ev__title{ font-weight:500; font-size:clamp(16px,1.5vw,21px); letter-spacing:-.01em; } .ev__meta{ font-size:16px; color:var(--ink-3); margin-top:3px; } .tbc{ display:inline-block; margin-left:10px; vertical-align:middle; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); border:1px dashed var(--line-strong); border-radius:999px; padding:3px 10px; } .ev__tag{ justify-self:start; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; padding:6px 12px; border-radius:999px; border:1px solid; } .ev__tag[data-t="saison"]{ color:var(--cyan); border-color:rgba(0,180,219,.4); background:rgba(0,35,144,.45); } .ev__tag[data-t="evaluation"]{ color:var(--green); border-color:rgba(0,243,166,.32); background:rgba(0,243,166,.07); } .ev__tag[data-t="vacances"]{ color:var(--ink-3); border-color:var(--line-strong); background:transparent; } .ev__tag[data-t="evenement"]{ color:var(--ink); border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.05); } .ev__tag[data-elite]{ color:var(--lime); border-color:rgba(217,243,0,.34); background:rgba(217,243,0,.07); } .ev__arw{ color:var(--ink-3); transition:transform .35s cubic-bezier(.16,1,.3,1),color .3s; } a.ev:hover .ev__arw{ transform:translateX(5px); color:var(--cyan); } .ev.is-hidden{ display:none; } .elite{ position:relative; overflow:hidden; border-block:1px solid var(--line); } .elite__bg{ position:absolute; inset:0; } .elite__bg img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.15) brightness(.5); } .elite__scrim{ position:absolute; inset:0; background:linear-gradient(95deg,rgba(5,7,10,.95) 30%,rgba(5,7,10,.55) 72%,rgba(87,0,148,.35)); } .elite .shell{ position:relative; } .elite .eyebrow{ color:var(--lime); } .medals{ display:flex; flex-wrap:wrap; gap:1px; background:var(--line); border:1px solid var(--line); margin:32px 0 30px; max-width:760px; } .medal{ background:rgba(5,7,10,.72); padding:20px 26px; flex:1 1 150px; } .medal b{ display:block; font-weight:700; font-size:clamp(30px,3.4vw,46px); line-height:1; letter-spacing:-.03em; color:var(--lime); } .medal span{ display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:9px; } .prestas{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); } .presta{ background:var(--bg); padding:clamp(24px,2.4vw,34px); min-height:250px; display:flex; flex-direction:column; transition:background .4s; } .presta:hover{ background:var(--surface); } .presta h3{ font-weight:600; text-transform:uppercase; font-size:17px; letter-spacing:-.005em; margin:0 0 14px; } .presta p{ font-size:16px; color:var(--ink-2); margin:0 0 auto; } .presta__go{ font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); margin-top:24px; display:flex; align-items:center; gap:8px; } .presta:hover .presta__go .arw{ transform:translateX(5px); } .presta__go .arw{ transition:transform .35s cubic-bezier(.16,1,.3,1); } .marquee{ overflow:hidden; border-block:1px solid var(--line); padding-block:20px; } .marquee__track{ display:flex; gap:52px; width:max-content; animation:slide 38s linear infinite; } .marquee span{ font-family:var(--mono); font-size:16px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:52px; white-space:nowrap; } .marquee span::after{ content:"◆"; color:var(--cyan); font-size:8px; } .foot{ background:var(--surface); border-top:1px solid var(--line); padding-block:clamp(56px,7vw,88px) 34px; } .foot__grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:clamp(28px,4vw,56px); } .foot h4{ font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin:0 0 18px; font-weight:500; } .foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; } .foot li a{ font-size:16px; color:var(--ink-2); transition:color .3s; } .foot li a:hover{ color:var(--cyan); } .foot__logo{ height:30px; width:auto; margin-bottom:20px; } .foot__moto{ font-family:var(--mono); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--cyan); } .foot__bottom{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; margin-top:clamp(40px,5vw,64px); padding-top:26px; border-top:1px solid var(--line); font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); } .rv{ opacity:0; transform:translateY(26px); } .rv-line{ display:block; overflow:hidden; } .topbar{ position:fixed; inset:0 0 auto 0; z-index:61; display:flex; align-items:center; justify-content:center; gap:18px; height:46px; padding-inline:var(--gutter); background:var(--blue-deep); color:#fff; font-family:var(--display); font-size:16px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; transition:transform .45s cubic-bezier(.16,1,.3,1); } .topbar.is-hidden{ transform:translateY(-100%); } .topbar a{ display:inline-flex; align-items:center; gap:9px; color:#fff; padding:7px 15px 7px 12px; border-bottom:0; transition:background .3s,color .3s; background:rgba(255,255,255,.13); border-radius:999px; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; } .topbar a:hover{ color:var(--blue-deep); border-color:transparent; background:#fff; } .topbar .arw{ flex:none; transition:transform .35s cubic-bezier(.16,1,.3,1); } .topbar a:hover .arw{ transform:translateY(3px); } .hdr__logo{ display:flex; align-items:center; margin-right:auto; flex:none; } .topbar .tb-label{ opacity:.92; } .splash{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; background:#04060A; overflow:hidden; will-change:clip-path; animation:splashFail 0s linear 4s forwards; } .sp-halo{ position:absolute; left:50%; top:50%; width:min(150vw,1100px); aspect-ratio:1; transform:translate(-50%,-50%) scale(.55); opacity:0; pointer-events:none; background:radial-gradient(circle,rgba(0,35,144,.95) 0%,rgba(0,35,144,.45) 34%,rgba(0,35,144,.12) 56%,transparent 72%); filter:blur(14px); } .sp-logo{ position:relative; height:clamp(38px,6vw,64px); width:auto; opacity:0; transform:scale(.94); filter:drop-shadow(0 0 26px rgba(0,35,144,.85)); } .nav a[aria-current="page"]{ color:var(--ink); } .nav a[aria-current="page"]::after{ transform:scaleX(1); } /* Le lime est reserve a CPK Elite : il doit survivre a l'etat "page courante", qui a exactement la meme specificite. D'ou cette position, apres. */ .nav a.is-elite{ color:var(--lime); } .nav a.is-elite::after{ background:var(--lime); } .phero{ position:relative; min-height:70svh; display:flex; align-items:flex-end; padding-top:140px; overflow:hidden; } .phero__media{ position:absolute; inset:0; } .phero__media img{ width:100%; height:100%; object-fit:cover; filter:saturate(.62) contrast(1.08) brightness(.7); } .phero__scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,7,10,.9),rgba(5,7,10,.3) 40%,rgba(5,7,10,.94) 88%,var(--bg)),radial-gradient(85% 70% at 14% 8%,rgba(0,243,166,.16),transparent 60%); } .phero .shell{ position:relative; z-index:2; padding-bottom:clamp(40px,6vh,72px); } .phero h1{ font-weight:700; text-transform:uppercase; font-size:clamp(40px,7.6vw,110px); line-height:.88; letter-spacing:-.038em; margin:22px 0 0; } .phero h1 span{ color:var(--green); } .phero__sub{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:28px; margin-top:30px; } .phero__sub p{ margin:0; max-width:50ch; color:var(--ink-2); font-size:clamp(15px,1.2vw,18px); } .picker{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line); } .pick{ background:var(--bg); padding:22px clamp(16px,2vw,28px); text-align:left; transition:background .35s,color .3s; position:relative; } .pick:hover{ background:var(--surface); } .pick b{ display:block; font-weight:600; text-transform:uppercase; font-size:clamp(15px,1.4vw,19px); letter-spacing:-.01em; } .pick span{ display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:8px; } .pick::after{ content:""; position:absolute; inset:auto 0 0 0; height:2px; background:var(--cyan); transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.16,1,.3,1); } .pick:hover::after{ transform:scaleX(1); } .cblock{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4.4vw,80px); align-items:center; padding-block:clamp(52px,7vw,104px); border-bottom:1px solid var(--line); } .cblock:nth-of-type(even) .cblock__media{ order:-1; } .cblock__media{ position:relative; overflow:hidden; border-radius:2px; aspect-ratio:4/3; } .cblock__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.16,1,.3,1); } .cblock:hover .cblock__media img{ transform:scale(1.045); } .cblock__age{ font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan); margin-bottom:16px; } .cblock[data-a="green"] .cblock__age{ color:var(--green); } .cblock[data-a="blue"] .cblock__age{ color:var(--blue-mid); } .cblock[data-a="lime"] .cblock__age{ color:var(--lime); } .cblock h2{ margin:0 0 20px; } .cblock p{ color:var(--ink-2); margin:0 0 24px; max-width:52ch; } .pills{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; } .pill{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; padding:7px 13px; border:1px solid var(--line-strong); border-radius:999px; color:var(--ink-2); } .meta{ list-style:none; margin:0 0 28px; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:14px 24px; } .meta li{ font-size:16px; color:var(--ink-2); padding-top:12px; border-top:1px solid var(--line); } .meta b{ display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:5px; font-weight:500; } .seq{ background:var(--surface); border-block:1px solid var(--line); } .seqline{ display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:44px; } .seqstep{ background:var(--surface); padding:24px 18px; min-height:190px; display:flex; flex-direction:column; position:relative; } .seqstep__n{ font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; color:var(--cyan); margin-bottom:18px; } .seqstep h3{ font-weight:600; text-transform:uppercase; font-size:20px; line-height:1.28; margin:0 0 10px; line-height:1.15; } .seqstep p{ font-size:16px; color:var(--ink-3); margin:0; } .levels{ display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:40px; } .level{ background:var(--bg); padding:24px 18px; } .level i{ display:block; width:100%; height:5px; border-radius:999px; margin-bottom:18px; } .level:nth-child(1) i{ background:#FFFFFF; } .level:nth-child(2) i{ background:#F4571E; } .level:nth-child(3) i{ background:#17C964; } .level:nth-child(4) i{ background:#1D4ED8; } .level:nth-child(5) i{ background:#E5322D; } .level:nth-child(6) i{ background:#8B2FD6; } .level b{ display:block; font-weight:600; text-transform:uppercase; font-size:16px; letter-spacing:-.005em; } .level span{ display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:var(--ink-3); margin-top:8px; } .bilan{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,80px); align-items:center; } .criteria{ list-style:none; margin:30px 0 0; padding:0; } .criteria li{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--line); font-size:16px; color:var(--ink-2); } .criteria em{ font-style:normal; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); } .spots{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:40px; } .spots--4{ grid-template-columns:repeat(4,1fr); } /* 404 : navigation, pas les centres */ .spot{ background:var(--bg); padding:clamp(24px,2.6vw,34px); min-height:180px; display:flex; flex-direction:column; transition:background .35s; } .spot:hover{ background:var(--surface); } .spot h3{ font-weight:600; text-transform:uppercase; font-size:20px; line-height:1.28; margin:0 0 10px; } .spot p{ font-size:16px; color:var(--ink-2); margin:0 0 auto; } .spot span{ font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); margin-top:22px; } .cta{ position:relative; background:var(--surface); border-block:1px solid var(--line); overflow:hidden; text-align:center; } .cta::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 100% at 50% 0%,rgba(0,35,144,.55),transparent 62%),radial-gradient(70% 100% at 50% 110%,rgba(0,35,144,.4),transparent 60%); } .cta .shell{ position:relative; } .cta .lead{ margin:22px auto 32px; } .cta__row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; } .tl{ border-top:1px solid var(--line); margin-top:44px; } .tlrow{ display:grid; grid-template-columns:150px 1fr; gap:clamp(20px,4vw,56px); padding:32px 4px; border-bottom:1px solid var(--line); transition:background .35s,padding .35s cubic-bezier(.16,1,.3,1); } .tlrow:hover{ background:rgba(255,255,255,.028); padding-inline:16px 4px; } .tlrow__y{ font-family:var(--mono); font-size:14px; letter-spacing:.1em; color:var(--cyan); } .tlrow h3{ font-weight:600; text-transform:uppercase; font-size:clamp(17px,1.8vw,23px); margin:0 0 12px; letter-spacing:-.01em; } .tlrow p{ margin:0; color:var(--ink-2); max-width:64ch; font-size:16px; } .princ{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:44px; } .princ > div{ background:var(--surface); padding:clamp(24px,2.8vw,38px); min-height:210px; display:flex; flex-direction:column; } .princ h3{ font-weight:600; text-transform:uppercase; font-size:20px; line-height:1.28; margin:0 0 12px; } .princ p{ font-size:16px; color:var(--ink-2); margin:0; } .princ__n{ font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; color:var(--cyan); margin-bottom:18px; } .team{ position:relative; overflow:hidden; border-radius:2px; margin-top:40px; border:1px solid var(--line); } .team img{ width:100%; height:auto; } button,input,select,textarea{ font:inherit; color:inherit; } .creds{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line); } .cred{ background:var(--bg); padding:26px clamp(18px,2vw,32px); } .cred b{ display:block; font-weight:700; font-size:clamp(28px,3.2vw,44px); line-height:1; letter-spacing:-.03em; color:var(--cyan); } .cred span{ display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:10px; } .offer{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4.4vw,80px); align-items:center; padding-block:clamp(52px,7vw,104px); border-bottom:1px solid var(--line); } .offer:last-of-type{ border-bottom:0; } .offer:nth-child(even) .offer__media{ order:-1; } .offer__media{ position:relative; overflow:hidden; border-radius:2px; aspect-ratio:4/3; } .offer__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.16,1,.3,1); filter:contrast(1.05); } .offer:hover .offer__media img{ transform:scale(1.045); } .offer__idx{ font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; color:var(--ink-3); margin-bottom:16px; } .offer h2{ margin:0 0 20px; } .offer p{ color:var(--ink-2); margin:0 0 24px; max-width:52ch; } .tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; } .tag{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; padding:7px 13px; border:1px solid var(--line-strong); border-radius:999px; color:var(--ink-2); } .offer[data-a="cyan"] .tag:hover{ border-color:var(--cyan); color:var(--cyan); } .specs{ list-style:none; margin:0 0 28px; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:14px 24px; } .specs li{ font-size:16px; color:var(--ink-2); padding-top:12px; border-top:1px solid var(--line); } .specs b{ display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:5px; font-weight:500; } .flow{ background:var(--surface); border-block:1px solid var(--line); } .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:44px; } .step{ background:var(--surface); padding:clamp(24px,2.6vw,36px); min-height:220px; display:flex; flex-direction:column; position:relative; } .step__n{ font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; color:var(--cyan); margin-bottom:20px; } .step h3{ font-weight:600; text-transform:uppercase; font-size:20px; line-height:1.28; margin:0 0 12px; letter-spacing:-.005em; } .step p{ font-size:16px; color:var(--ink-2); margin:0; } .step__t{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:auto; padding-top:20px; } .kit{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,80px); align-items:center; } .kit__list{ list-style:none; margin:30px 0 0; padding:0; } .kit__list li{ display:grid; grid-template-columns:1fr auto; gap:20px; align-items:baseline; padding:16px 0; border-bottom:1px solid var(--line); font-size:16px; } .kit__list li span{ font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; color:var(--ink-3); white-space:nowrap; } .faq{ border-top:1px solid var(--line); margin-top:44px; } .qa{ border-bottom:1px solid var(--line); } .qa__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 4px; background:none; border:0; cursor:pointer; text-align:left; font-weight:500; font-size:clamp(16px,1.5vw,20px); letter-spacing:-.01em; transition:color .3s,padding .35s; } .qa__q:hover{ color:var(--cyan); padding-inline:14px 4px; } .qa__i{ flex:none; width:16px; height:16px; position:relative; } .qa__i::before,.qa__i::after{ content:""; position:absolute; inset:50% 0 auto 0; height:1.5px; background:currentColor; transition:transform .4s cubic-bezier(.16,1,.3,1); } .qa__i::after{ transform:rotate(90deg); } .qa.is-open .qa__i::after{ transform:rotate(0); } .qa__a{ max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.16,1,.3,1); } .qa__a p{ margin:0 0 24px; color:var(--ink-2); max-width:72ch; font-size:16px; } .qa.is-open .qa__a{ max-height:340px; } .devis{ position:relative; background:var(--surface); border-block:1px solid var(--line); overflow:hidden; } .devis::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(70% 100% at 88% 4%,rgba(0,35,144,.66),transparent 60%),radial-gradient(60% 90% at 2% 100%,rgba(0,35,144,.62),transparent 62%); } .devis__grid{ position:relative; display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,80px); align-items:start; } .form{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } .field{ display:flex; flex-direction:column; gap:9px; } .field.full{ grid-column:1 / -1; } .field label{ font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); } .field input,.field select,.field textarea{ line-height:normal; background:rgba(5,7,10,.6); border:1px solid var(--line-strong); border-radius:2px; padding:14px 16px; font-size:16px; font-weight:300; color:var(--ink); font-family:var(--display); transition:border-color .3s,background .3s; width:100%; } .field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--cyan); outline:none; background:rgba(5,7,10,.85); } .field textarea{ resize:vertical; min-height:130px; } .field select{ appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23F2F5F7' stroke-width='1.2' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; } .form .btn{ grid-column:1 / -1; justify-self:start; border:0; cursor:pointer; } .formnote{ grid-column:1 / -1; font-size:16px; color:var(--ink-3); margin:0; } .contactbits{ list-style:none; margin:32px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; } .contactbits li{ padding-top:16px; border-top:1px solid var(--line); } .contactbits b{ display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; font-weight:500; } .contactbits a{ font-size:17px; transition:color .3s; } .contactbits a:hover{ color:var(--cyan); } .btn-lime{ background:var(--lime); color:#05070A; } .btn-lime:hover{ background:#EDFF3D; } .ehero{ position:relative; min-height:86svh; display:flex; align-items:flex-end; padding-top:150px; overflow:hidden; } .ehero__media{ position:absolute; inset:0; } .ehero__media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.2) brightness(.55); } .ehero__scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,7,10,.9),rgba(5,7,10,.3) 42%,rgba(5,7,10,.95) 86%,var(--bg)),radial-gradient(80% 70% at 88% 12%,rgba(87,0,148,.5),transparent 62%),radial-gradient(60% 60% at 4% 96%,rgba(217,243,0,.09),transparent 60%); } .ehero .shell{ position:relative; z-index:2; padding-bottom:clamp(40px,6vh,72px); } .ehero h1{ font-weight:700; text-transform:uppercase; font-size:clamp(42px,8.4vw,124px); line-height:.85; letter-spacing:-.04em; margin:22px 0 0; } .ehero h1 span{ display:block; color:var(--lime); } .ehero__sub{ display:flex; flex-wrap:wrap; gap:28px; align-items:flex-end; justify-content:space-between; margin-top:30px; } .ehero__sub p{ margin:0; max-width:48ch; color:var(--ink-2); font-size:clamp(15px,1.2vw,18px); } .detour{ background:var(--lime); color:#05070A; } .detour .shell{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; min-height:76px; padding-block:14px; } .detour p{ margin:0; padding:0; align-self:center; font-weight:500; font-size:clamp(15px,1.4vw,19px); letter-spacing:-.01em; } .detour a{ display:inline-flex; align-items:center; align-self:center; margin:0; line-height:1; gap:10px; font-family:var(--mono); font-size:16px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding:14px 22px; background:#05070A; color:var(--lime); border-radius:2px; transition:transform .35s cubic-bezier(.16,1,.3,1); } .detour a:hover{ transform:translateX(4px); } .palm{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); } .palmcell{ background:var(--bg); padding:clamp(26px,3vw,42px); } .palmcell b{ display:block; font-weight:700; font-size:clamp(46px,6vw,92px); line-height:1; letter-spacing:-.045em; color:var(--lime); font-variant-numeric:tabular-nums; } .palmcell span{ display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:14px; } .vs{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:44px; } .vscol{ background:var(--surface); padding:clamp(26px,3vw,42px); } .vscol:last-child{ background:var(--surface-2); } .vscol h3{ font-weight:600; text-transform:uppercase; font-size:20px; line-height:1.28; margin:0 0 6px; letter-spacing:-.005em; } .vscol .who{ font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); margin:0 0 24px; } .vscol:last-child .who{ color:var(--lime); } .vscol ul{ list-style:none; margin:0; padding:0; } .vscol li{ font-size:16px; color:var(--ink-2); padding:13px 0 13px 20px; border-top:1px solid var(--line); position:relative; } .vscol li::before{ content:""; position:absolute; left:0; top:22px; width:8px; height:1px; background:var(--ink-3); } .path{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:44px; } .pathstep{ background:var(--surface); padding:clamp(24px,2.8vw,38px); min-height:230px; display:flex; flex-direction:column; } .pathstep__n{ font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; color:var(--lime); margin-bottom:20px; } .pathstep h3{ font-weight:600; text-transform:uppercase; font-size:20px; line-height:1.28; margin:0 0 12px; } .pathstep p{ font-size:16px; color:var(--ink-2); margin:0; } .ext{ position:relative; background:var(--surface); border-block:1px solid var(--line); overflow:hidden; } .ext::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(70% 110% at 84% 6%,rgba(87,0,148,.45),transparent 60%),radial-gradient(50% 80% at 6% 100%,rgba(217,243,0,.1),transparent 62%); } .ext .shell{ position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,72px); align-items:center; } .urlcard{ border:1px solid var(--line-strong); border-radius:3px; background:rgba(5,7,10,.6); padding:26px; backdrop-filter:blur(8px); } .urlcard__bar{ display:flex; align-items:center; gap:8px; padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--line); } .urlcard__bar i{ width:9px; height:9px; border-radius:50%; background:var(--line-strong); } .urlcard__url{ font-family:var(--mono); font-size:14px; color:var(--ink-2); margin-left:10px; word-break:break-all; } .urlcard ul{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:12px; } .urlcard li{ font-size:16px; color:var(--ink-2); display:flex; gap:11px; align-items:flex-start; } .urlcard li::before{ content:"→"; color:var(--lime); flex:none; } .urlcard .btn{ width:100%; justify-content:center; } .icards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:44px; } .icard{ background:var(--surface); padding:clamp(24px,2.8vw,38px); min-height:220px; display:flex; flex-direction:column; transition:background .4s; } .icard:hover{ background:var(--surface-2); } .icard h3{ font-weight:600; text-transform:uppercase; font-size:20px; line-height:1.28; margin:0 0 12px; } .icard p{ font-size:16px; color:var(--ink-2); margin:0 0 auto; } .icard span{ font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); margin-top:24px; display:flex; align-items:center; gap:8px; } .icard:hover .arw{ transform:translateX(5px); } .icard .arw{ transition:transform .35s cubic-bezier(.16,1,.3,1); } .cwrap{ position:relative; background:var(--surface); border-block:1px solid var(--line); overflow:hidden; } .cwrap::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(70% 100% at 88% 4%,rgba(0,35,144,.62),transparent 60%),radial-gradient(60% 90% at 2% 100%,rgba(0,35,144,.5),transparent 62%); } .cwrap .shell{ position:relative; display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,80px); align-items:start; } .cbits{ list-style:none; margin:32px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; } .cbits li{ padding-top:16px; border-top:1px solid var(--line); } .cbits b{ display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; font-weight:500; } .cbits a{ font-size:18px; transition:color .3s; } .cbits a:hover{ color:var(--cyan); } .socials{ display:flex; gap:10px; margin-top:26px; flex-wrap:wrap; } .social{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; padding:11px 18px; border:1px solid var(--line-strong); border-radius:999px; color:var(--ink-2); transition:color .3s,border-color .3s; } .social:hover{ color:var(--cyan); border-color:var(--cyan); } .btn-wa{ background:var(--green); color:#05070A; } .btn-wa:hover{ background:#4DFFC4; } .btn-wa svg{ flex:none; } .wa-inline{ display:inline-flex; align-items:center; gap:10px; font-size:18px; color:var(--ink); transition:color .3s; } .wa-inline:hover{ color:var(--green); } .wa-inline svg{ color:var(--green); flex:none; } .lhero{ padding:calc(110px + 6vh) 0 clamp(40px,6vw,68px); border-bottom:1px solid var(--line); background:radial-gradient(70% 120% at 82% 0%,rgba(0,35,144,.55),transparent 62%); } .lhero h1{ font-weight:700; text-transform:uppercase; font-size:clamp(34px,5.4vw,74px); line-height:.94; letter-spacing:-.03em; margin:22px 0 20px; } .lhero p{ max-width:60ch; color:var(--ink-2); margin:0; font-size:clamp(15px,1.2vw,18px); } .lupdate{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:26px; } .lwrap{ display:grid; grid-template-columns:250px 1fr; gap:clamp(32px,5vw,88px); max-width:var(--maxw); margin-inline:auto; padding:clamp(48px,7vw,88px) var(--gutter); align-items:start; } .lnav{ position:sticky; top:104px; display:flex; flex-direction:column; gap:2px; } .lnav a{ display:block; padding:12px 16px; border-radius:2px; font-size:16px; color:var(--ink-3); border-left:2px solid transparent; transition:color .3s,background .3s,border-color .3s; } .lnav a:hover{ color:var(--ink); background:rgba(255,255,255,.03); } .lnav a.is-active{ color:var(--ink); background:var(--surface); border-left-color:var(--cyan); font-weight:500; } .ldoc{ max-width:76ch; } .ldoc section{ scroll-margin-top:110px; padding-bottom:clamp(48px,6vw,80px); margin-bottom:clamp(48px,6vw,80px); border-bottom:1px solid var(--line); } .ldoc section:last-child{ border-bottom:0; margin-bottom:0; } .ldoc h2{ font-weight:700; text-transform:uppercase; font-size:clamp(28px,3.4vw,48px); line-height:1.06; letter-spacing:-.025em; margin:0 0 28px; } .ldoc h3{ font-weight:600; font-size:clamp(17px,1.6vw,21px); letter-spacing:-.01em; margin:40px 0 14px; color:var(--ink); } .ldoc h3:first-of-type{ margin-top:0; } .ldoc p{ color:var(--ink-2); margin:0 0 1.15em; font-size:16px; line-height:1.72; } .ldoc ul{ list-style:none; margin:0 0 1.4em; padding:0; } .ldoc li{ position:relative; color:var(--ink-2); font-size:16px; line-height:1.65; padding:0 0 10px 20px; } .ldoc li::before{ content:""; position:absolute; left:0; top:.72em; width:7px; height:1px; background:var(--cyan); } .ldoc strong{ color:var(--ink); font-weight:600; } .ldoc a{ color:var(--cyan); text-underline-offset:4px; text-decoration:underline; text-decoration-thickness:1px; } .ldoc a:hover{ color:var(--green); } .ldoc .callout{ border:1px solid var(--line-strong); border-left:2px solid var(--cyan); border-radius:2px; background:var(--surface); padding:22px 24px; margin:0 0 1.6em; } .ldoc .callout p:last-child{ margin-bottom:0; } .idcard{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin:0 0 1.6em; } .idcard div{ background:var(--surface); padding:18px 20px; } .idcard b{ display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px; font-weight:500; } .idcard span, .idcard a{ font-size:16px; color:var(--ink-2); } html{ scroll-padding-top:90px; } html.has-topbar{ scroll-padding-top:104px; } @keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(0,243,166,0); } 100%{ box-shadow:0 0 0 0 rgba(0,243,166,0); } } @keyframes slide{ to{ transform:translateX(-50%); } } @keyframes splashFail{ to{ opacity:0; visibility:hidden; } } /* ---------- Adaptations d'ecran ---------- */ @media (max-width:1180px){ .trace{ display:none; } } @media (max-width:1100px){ .hdr, .hdr.is-stuck{ backdrop-filter:none; -webkit-backdrop-filter:none; transform:none !important; } .hdr.is-stuck{ background:rgba(5,7,10,.94); } .nav{ position:fixed; inset:0; height:100dvh; overscroll-behavior:contain; overflow-y:auto; flex-direction:column; justify-content:center; background:rgba(5,7,10,.97); backdrop-filter:blur(20px); gap:6px; clip-path:inset(0 0 100% 0); transition:clip-path .6s cubic-bezier(.76,0,.24,1); } .nav.is-open{ clip-path:inset(0 0 0 0); } .nav a{ font-size:20px; font-family:var(--display); font-weight:600; letter-spacing:.04em; padding:12px; } .nav a::after{ display:none; } .burger{ display:block; position:relative; z-index:70; } .hdr__cta .btn{ display:none; } .hero{ padding-top:120px; } .seqline{ grid-template-columns:repeat(3,1fr); } } @media (max-width:1000px){ .courses{ grid-template-columns:repeat(2,1fr); } .prestas{ grid-template-columns:repeat(2,1fr); } .spots{ grid-template-columns:repeat(2,1fr); } .steps{ grid-template-columns:repeat(2,1fr); } } @media (max-width:960px){ .split{ grid-template-columns:1fr; } .join__grid{ grid-template-columns:1fr; } .devis__grid{ grid-template-columns:1fr; } .cwrap .shell{ grid-template-columns:1fr; } .lwrap{ grid-template-columns:1fr; gap:32px; } .lnav{ position:static; flex-direction:row; flex-wrap:wrap; gap:8px; padding-bottom:24px; border-bottom:1px solid var(--line); } .lnav a{ border-left:0; border:1px solid var(--line-strong); border-radius:999px; padding:9px 15px; font-size:16px; } .lnav a.is-active{ border-color:var(--cyan); color:var(--cyan); background:transparent; } } @media (max-width:900px){ .doors{ grid-template-columns:repeat(2,1fr); } .door{ min-height:128px; padding:18px; border-bottom:1px solid var(--line); } .door:nth-child(2n){ border-right:0; } .door:last-child{ grid-column:1 / -1; } .door__desc{ display:none; } .foot__grid{ grid-template-columns:1fr 1fr; } .cblock{ grid-template-columns:1fr; } .cblock:nth-of-type(even) .cblock__media{ order:0; } .levels{ grid-template-columns:repeat(3,1fr); } .bilan{ grid-template-columns:1fr; } .offer{ grid-template-columns:1fr; } .offer:nth-child(even) .offer__media{ order:0; } .kit{ grid-template-columns:1fr; } .ext .shell{ grid-template-columns:1fr; } } @media (max-width:860px){ .princ{ grid-template-columns:1fr; } .princ > div{ min-height:0; } .path{ grid-template-columns:1fr; } .pathstep{ min-height:0; } .icards{ grid-template-columns:1fr; } .icard{ min-height:0; } } @media (max-width:820px){ .fem__head{ grid-template-columns:1fr; } .gal{ grid-template-columns:repeat(6,1fr); grid-auto-rows:96px; } .g1{ grid-column:span 6; grid-row:span 3; } .g2,.g4,.g5,.g6{ grid-column:span 3; grid-row:span 2; } .g3{ grid-column:span 6; grid-row:span 3; } .ev{ grid-template-columns:1fr auto; gap:10px 16px; } .ev__date{ grid-column:1 / -1; } .ev__arw{ display:none; } .tbc{ margin:8px 0 0; display:block; width:max-content; } } @media (max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr); } .picker{ grid-template-columns:repeat(2,1fr); } .creds{ grid-template-columns:repeat(2,1fr); } .palm{ grid-template-columns:repeat(2,1fr); } .vs{ grid-template-columns:1fr; } } @media (max-width:700px){ .topbar{ font-size:11.5px; letter-spacing:.04em; gap:12px; height:44px; } .topbar .tb-label{ display:block; } /* .hdr{top:44px} vit desormais sous body.p-home : le bandeau promo n'existe que sur l'accueil, cette regle n'a rien a faire ailleurs. */ .topbar a{ font-size:11px; padding:7px 13px 7px 11px; letter-spacing:.08em; } .tlrow{ grid-template-columns:1fr; gap:12px; } } @media (max-width:640px){ .seqline{ grid-template-columns:1fr; } .seqstep{ min-height:0; } } @media (max-width:620px){ .form{ grid-template-columns:1fr; } } @media (max-width:600px){ .idcard{ grid-template-columns:1fr; } } @media (max-width:560px){ .courses{ grid-template-columns:1fr; } .course{ min-height:0; } .prestas{ grid-template-columns:1fr; } .presta{ min-height:0; } .foot__grid{ grid-template-columns:1fr; } .steps{ grid-template-columns:1fr; } .step{ min-height:0; } } @media (max-width:520px){ .meta{ grid-template-columns:1fr; } .levels{ grid-template-columns:repeat(2,1fr); } .spots{ grid-template-columns:1fr; } .spot{ min-height:0; } .specs{ grid-template-columns:1fr; } } @media (max-width:420px){ .topbar .tb-label{ display:none; } } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .rv{ opacity:1 !important; transform:none !important; } html{ scroll-behavior:auto; } .splash{ display:none; } } /* ============================================================ VARIANTES PAR PAGE ============================================================ */ body.p-home{ --section-y:clamp(88px,12vh,168px); } body.p-elite :focus-visible{ outline:2px solid var(--lime); outline-offset:3px; border-radius:2px; } body.p-elite ::selection{ background:var(--lime); color:#05070A; } body.p-elite .btn-ghost:hover{ border-color:var(--lime); color:var(--lime); } body.p-home .hdr{ position:fixed; inset:0 0 auto 0; z-index:60; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px var(--gutter); transition:background .4s,border-color .4s,padding .4s,top .45s cubic-bezier(.16,1,.3,1); border-bottom:1px solid transparent; top:46px; } body.p-home .hdr.is-stuck{ background:rgba(5,7,10,.82); backdrop-filter:blur(16px); border-bottom-color:var(--line); padding-block:12px; top:0; } body.p-prestations .phero{ position:relative; min-height:74svh; display:flex; align-items:flex-end; padding-top:140px; overflow:hidden; } body.p-prestations .phero__media{ position:absolute; inset:0; z-index:0; } body.p-prestations .phero__media img{ width:100%; height:100%; object-fit:cover; filter:saturate(.6) contrast(1.08) brightness(.72); } body.p-prestations .phero__scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(5,7,10,.9),rgba(5,7,10,.32) 40%,rgba(5,7,10,.94) 88%,var(--bg)),radial-gradient(90% 70% at 82% 10%,rgba(0,35,144,.6),transparent 60%); } body.p-prestations .phero h1 span{ color:var(--cyan); } body.p-contact .field textarea{ resize:vertical; min-height:150px; } /* L'accueil est la seule page dont .hdr est porte par body.p-home (bandeau promo). Les deux @media ci-dessous doivent donc l'etre aussi, sinon leur specificite plus faible les fait perdre - dont le correctif du header mobile, a ne pas casser. */ @media (max-width:1100px){ body.p-home .hdr, body.p-home .hdr.is-stuck{ backdrop-filter:none; -webkit-backdrop-filter:none; transform:none !important; } body.p-home .hdr.is-stuck{ background:rgba(5,7,10,.94); } } @media (max-width:700px){ body.p-home .hdr{ top:44px; } } /* --- Lien d'evitement : premier arret de la tabulation, invisible tant qu'il n'a pas le focus. Sans lui, on retraverse les 6 entrees du menu a chaque page. --- */ .skip{ position:fixed; left:12px; top:12px; z-index:300; display:inline-flex; align-items:center; white-space:nowrap; line-height:1; transform:translateY(-250%); transition:transform .25s cubic-bezier(.16,1,.3,1); padding:13px 20px; border-radius:2px; background:var(--blue-deep); color:#fff; font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; } .skip:focus{ transform:none; } /* ============================================================ ICÔNES — Iconoir (MIT), tracés repris tels quels depuis la source. Sprite inline dans chaque page : aucune requête reseau, aucune police d'icônes, et le tracé hérite de currentColor donc des couleurs de charte. Dimensionnement : les deux flèches ne remplissent pas leur cadre de 24 px de la même façon — arrow-right occupe 75 % de la largeur, arrow-up-right seulement 54 %. A taille de cadre égale la diagonale paraîtrait deux fois plus petite, d'ou deux valeurs differentes. Les cadres sont calés pour que l'icône pese optiquement ~1,35x l'ancienne flèche texte qu'elle remplace. ============================================================ */ .sprite{ position:absolute; width:0; height:0; overflow:hidden; } .icon, .arw, .ev__arw{ display:inline-block; width:1em; height:1em; flex:none; fill:none; stroke:currentColor; /* Iconoir dessine en 1,5 sur 24 px. A 12-16 px sur fond sombre le trait devient filiforme : on l'épaissit un peu pour tenir la lisibilité. */ stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; } .btn .arw{ width:1.05em; height:1.05em; } .arw--ext{ width:1.35em; height:1.35em; } .btn .arw--ext{ width:1.5em; height:1.5em; } .topbar .arw{ width:1.45em; height:1.45em; } /* pictogramme, pas une flèche de fin de libellé */ .checks .icon{ width:20px; height:20px; color:var(--green); margin-top:1px; } /* ============================================================ BOÎTE DE DIALOGUE — réservation d'un cours d'essai