/* ═══════════════════════════════════════════════════════════════ KINE+ — Ans · direction artistique « Le plateau » Pièce unique : le noir et les deux oranges sont échantillonnés sur le logo du centre, et le motif de règle graduée est repris de la piste de sprint peinte au sol de leur plateau technique. Les 4 variables de thème arrivent du (content.json). ═══════════════════════════════════════════════════════════════ */ /* ── Polices auto-hébergées (RGPD : aucun appel à Google) ────── */ /* Archivo est une police variable : un seul fichier de 36 Ko couvre 400 à 800. */ @font-face{ font-family:"Archivo"; src:url("../assets/fonts/Archivo-var.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; } @font-face{ font-family:"Space Mono"; src:url("../assets/fonts/SpaceMono-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; } /* ── Jetons ──────────────────────────────────────────────────── */ :root{ --noir: #1E2223; --noir-2: #242828; --noir-3: #2B3031; --blanc: #F2F0EE; --gris: #9CA3A3; --orange: #E86A16; --brique: #CD4114; --recouvre: #9A3A15; /* le seul vert du site : le voyant « ouvert maintenant ». L'orange de la DA se lisait comme un feu à l'arrêt — un voyant d'état doit rester univoque. */ --vert: #3FC46B; --ligne: rgba(242,240,238,.13); --ligne-fort:rgba(242,240,238,.26); /* alias pour les pages générées (mentions, merci) */ --muted: var(--gris); --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --pad: clamp(68px, 8.5vw, 128px); --lisse: cubic-bezier(.2,.72,.24,1); } *,*::before,*::after{ box-sizing:border-box } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% } body{ margin:0; background:var(--noir); color:var(--blanc); font-family:var(--sans); font-size:17px; line-height:1.6; font-weight:400; letter-spacing:-.005em; overflow-x:hidden; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; height:auto } a{ color:inherit; text-decoration:none } h1,h2,h3{ margin:0; font-weight:800; letter-spacing:-.03em; line-height:1.05 } p{ margin:0 } ul,dl,dd{ margin:0; padding:0 } li{ list-style:none } svg.defs{ position:absolute; width:0; height:0; overflow:hidden } .wrap{ max-width:1180px; margin:0 auto; padding:0 26px } /* les liens de nav ne doivent jamais déposer un titre sous la barre fixe */ main section[id]{ scroll-margin-top:82px } .saut{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--orange); color:#171A1A; padding:12px 18px; font-weight:700; } .saut:focus{ left:8px; top:8px } :focus-visible{ outline:2px solid var(--orange); outline-offset:3px } /* ── Étiquettes & titres communs ─────────────────────────────── */ .sur-titre{ font:700 .67rem/1.4 var(--mono); letter-spacing:.19em; text-transform:uppercase; color:var(--orange); margin-bottom:20px; } .titre{ font-size:clamp(1.65rem,3.5vw,2.85rem); margin-bottom:22px } .intro{ color:var(--gris); font-size:1.04rem; line-height:1.68; max-width:57ch } .intro-suite{ margin-top:14px } .lab{ font:700 .6rem/1.4 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--gris); } .sec-head{ max-width:640px; margin-bottom:clamp(40px,5vw,64px) } /* ── Le « + » KINE+ ──────────────────────────────────────────── */ /* Deux barres arrondies en dégradé + le carré de recouvrement du logo, redessiné à l'identique (couleurs relevées au pixel). */ .plus{ width:1em; height:1em; overflow:visible; flex:none } .plus-h,.plus-v,.plus-c{ transform-origin:20px 20px } /* ── Barre de navigation ─────────────────────────────────────── */ .barre{ position:fixed; inset:0 0 auto; z-index:60; background:rgba(30,34,35,0); border-bottom:1px solid transparent; transition:background .4s var(--lisse), border-color .4s var(--lisse), backdrop-filter .4s var(--lisse); } .barre.collee{ background:rgba(30,34,35,.88); border-bottom-color:var(--ligne); backdrop-filter:saturate(140%) blur(14px); } .barre-in{ max-width:1180px; margin:0 auto; padding:16px 26px; display:flex; align-items:center; gap:26px; } .marque{ display:flex; align-items:baseline; gap:.14em; flex:none } .marque-txt{ font-size:1.42rem; font-weight:800; letter-spacing:-.035em; line-height:1; } .marque .plus{ width:.72em; height:.72em; font-size:1.42rem; transform:translateY(.02em) } .liens{ display:flex; gap:26px; margin-left:auto; align-items:center } .liens a{ font-size:.93rem; font-weight:500; color:var(--gris); padding:6px 0; position:relative; transition:color .25s; } .liens a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--lisse); } .liens a:hover{ color:var(--blanc) } .liens a:hover::after{ transform:scaleX(1) } .tel-btn{ display:inline-flex; align-items:center; gap:9px; flex:none; font:700 .86rem/1 var(--mono); letter-spacing:.02em; padding:11px 16px; border:1px solid var(--ligne-fort); border-radius:2px; transition:border-color .3s, background .3s, color .3s; } .tel-btn svg{ width:16px; height:16px; fill:var(--orange); flex:none } .tel-btn:hover{ background:var(--orange); border-color:var(--orange); color:#171A1A } .tel-btn:hover svg{ fill:#171A1A } /* ── Boutons ─────────────────────────────────────────────────── */ .btn{ display:inline-flex; align-items:center; justify-content:center; padding:16px 26px; border:1px solid transparent; border-radius:2px; font-size:.98rem; font-weight:700; letter-spacing:-.01em; cursor:pointer; transition:transform .28s var(--lisse), background .28s, color .28s, border-color .28s; } .btn-plein,.btn-primary{ background:var(--orange); color:#171A1A } .btn-plein:hover,.btn-primary:hover{ background:#F5811F; transform:translateY(-2px) } .btn-vide{ border-color:var(--ligne-fort); color:var(--blanc) } .btn-vide:hover{ border-color:var(--blanc); transform:translateY(-2px) } /* ── Jauge de lecture : la règle graduée, à la verticale ─────── */ .jauge{ position:fixed; left:18px; top:0; bottom:0; width:30px; z-index:40; display:none; pointer-events:none; } .jauge-tape{ position:absolute; inset:0; border-left:1px solid var(--ligne); background-image: linear-gradient(to bottom, rgba(242,240,238,.20) 0 1px, transparent 1px), linear-gradient(to bottom, rgba(242,240,238,.40) 0 1.5px, transparent 1.5px); background-size:8px 15px, 17px 75px; background-repeat:repeat-y; background-position:0 0, 0 0; } .jauge-curseur{ position:absolute; left:0; top:0; width:24px; height:2px; background:var(--orange); box-shadow:0 0 16px rgba(232,106,22,.75); will-change:transform; } .jauge-val{ position:absolute; left:28px; top:-.62em; font:700 .6rem/1 var(--mono); letter-spacing:.06em; color:var(--orange); } @media (min-width:1360px){ .jauge{ display:block } } /* ═══════════════════ HERO ═══════════════════ */ .hero{ position:relative; overflow:hidden; min-height:min(94svh,880px); display:flex; align-items:center; padding:132px 0 118px; border-bottom:1px solid var(--ligne); } .hero-fond{ position:absolute; inset:0; z-index:0 } .hero-fond img{ width:100%; height:100%; object-fit:cover; object-position:50% 62%; opacity:.34; filter:contrast(1.06) saturate(.92); } .hero-fond::after{ content:""; position:absolute; inset:0; background: linear-gradient(100deg, var(--noir) 4%, rgba(30,34,35,.9) 42%, rgba(30,34,35,.42) 78%), linear-gradient(to top, var(--noir) 0%, rgba(30,34,35,0) 34%); } .hero-lueur{ position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(52% 46% at 14% 34%, rgba(232,106,22,.16), transparent 70%); } .hero-in{ position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:0 26px; width:100% } .hero-titre{ font-size:clamp(2.55rem,7.1vw,5.5rem); line-height:.95; letter-spacing:-.042em; margin:0 0 30px; } .hero-titre .mot{ display:block; overflow:hidden; padding-bottom:.02em } .hero-titre .mot > span{ display:block } .hero-titre .mot:last-child > span{ color:var(--orange); background:linear-gradient(96deg,#F0781C 12%,#CD4114 92%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .hero-txt{ color:#C8CDCD; font-size:1.1rem; line-height:1.66; max-width:53ch; margin-bottom:34px } .hero-actions{ display:flex; flex-wrap:wrap; gap:13px; margin-bottom:34px } /* Sans JS, le bandeau garde son attribut hidden — mais un display en CSS bat le display:none que le navigateur applique à [hidden]. Sans cette ligne, le visiteur sans JS voit une pastille grise et un filet, sans texte d'état. */ .statut[hidden]{ display:none } .statut{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:10px; font:700 .72rem/1 var(--mono); letter-spacing:.11em; text-transform:uppercase; padding:11px 15px; border:1px solid var(--ligne); border-radius:2px; background:rgba(36,40,40,.7); } .pastille{ width:7px; height:7px; border-radius:50%; background:var(--gris); flex:none; } .statut.ouvert .pastille{ background:var(--vert); box-shadow:0 0 0 3px rgba(63,196,107,.22); animation:pouls 2.6s ease-in-out infinite; } @keyframes pouls{ 0%,100%{ box-shadow:0 0 0 3px rgba(63,196,107,.22) } 50%{ box-shadow:0 0 0 7px rgba(63,196,107,0) } } .statut-note{ color:var(--gris); letter-spacing:.06em; text-transform:none; font-family:var(--sans); font-weight:500; font-size:.8rem; padding-left:10px; border-left:1px solid var(--ligne); } /* la piste graduée, calée sous le hero — comme au sol du plateau */ .piste{ position:absolute; left:0; right:0; bottom:0; height:52px; z-index:2; border-top:1px solid var(--ligne-fort); background:linear-gradient(to top, rgba(30,34,35,.96), rgba(30,34,35,.25)); } .piste-ticks{ position:absolute; inset:0; background-image: linear-gradient(to right, rgba(242,240,238,.30) 0 1px, transparent 1px), linear-gradient(to right, rgba(242,240,238,.55) 0 1.5px, transparent 1.5px); background-size:2% 9px, 10% 19px; background-repeat:repeat-x, repeat-x; background-position:0 0, 0 0; } .piste-nums{ position:absolute; left:0; right:0; bottom:9px; display:flex } .piste-nums i{ flex:0 0 10%; padding-left:7px; font:700 .6rem/1 var(--mono); letter-spacing:.1em; color:rgba(242,240,238,.55); font-style:normal; } /* ═══════════════════ CHIFFRES ═══════════════════ */ /* Les cellules bordées ont sauté : les chiffres respirent et occupent la largeur, comme sur « nocturne » — c'est ce que Luca a retenu. */ .chiffres{ padding:clamp(54px,7vw,86px) 0; border-bottom:1px solid var(--ligne); background:var(--noir-2); } /* Le titre porte désormais le total (150 m²) dont les trois chiffres sont le détail : il passe du sur-titre mono à un vrai énoncé, sinon le chiffre qui compte le plus serait le plus petit de la section. */ .chiffres-titre{ margin-bottom:clamp(34px,4.4vw,52px); max-width:22ch } .chiffres-grid{ display:grid; gap:clamp(28px,4vw,46px); grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); } .chiffre{ position:relative; padding-top:26px } /* La graduation en tête de chaque chiffre : la piste de sprint peinte au sol de son plateau, réduite à une réglette. Les traits courent sur toute la largeur, et le premier segment est orange — le repère d'une vraie règle. */ .chiffre::before{ content:""; position:absolute; inset:0 0 auto 0; height:13px; background-image:repeating-linear-gradient(to right,var(--ligne-fort) 0 1px,transparent 1px 8px); } .chiffre::after{ content:""; position:absolute; inset:0 auto auto 0; width:38px; height:13px; background-image:repeating-linear-gradient(to right,var(--orange) 0 1px,transparent 1px 8px); } .chiffre-val{ font-size:clamp(3.4rem,8vw,6rem); font-weight:900; letter-spacing:-.06em; line-height:.82; } /* l'unité reste en Archivo : en Space Mono, le « ² » occupe une pleine cellule monospace et creuse un trou après le « m ». Elle monte en exposant plutôt que de s'aligner sur la ligne de base — sinon elle écrase le chiffre. */ .chiffre-val em{ font:600 .3em/1 var(--sans); font-style:normal; color:var(--orange); letter-spacing:0; margin-left:.08em; vertical-align:baseline; position:relative; top:-1.55em; } /* Le « + » de « 7+ » n'est pas une unité : il se lit dans la foulée du chiffre. Il reste donc sur la ligne, à taille lisible — en exposant à .3em il devenait un astérisque perdu au-dessus du 7. */ .chiffre-val em.signe{ font:900 .5em/1 var(--sans); color:var(--orange); vertical-align:baseline; top:-.06em; margin-left:.01em; letter-spacing:-.04em; } .chiffre-val em:empty{ display:none } .compteur{ font-variant-numeric:tabular-nums } .chiffre-lib{ color:var(--gris); font-size:.9rem; line-height:1.45; max-width:15ch; margin-top:18px; } /* ═══════════════════ LE CENTRE ═══════════════════ */ .centre{ padding:var(--pad) 0; border-bottom:1px solid var(--ligne) } .centre-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(38px,5vw,72px); align-items:start; } /* isolation : le calque de bichromie ci-dessous se mélange en mix-blend-mode. Sans stacking context garanti, il irait chercher le fond de la section — et sur mobile le sticky saute, donc on ne peut pas compter dessus. */ .centre-photo{ position:relative; position:sticky; top:96px; isolation:isolate } .centre-photo img{ width:100%; aspect-ratio:11/13; object-fit:cover; border-radius:2px; filter:contrast(1.04) saturate(.95); transition:filter .55s var(--lisse); } /* Au survol, le plateau bascule en bichromie noir / orange — les deux oranges du logo, rien d'autre. La photo passe en niveaux de gris, le calque lui rend teinte et saturation sans toucher aux valeurs (mix-blend-mode:color) : les noirs restent noirs, les hautes lumières partent en orange. ⚠ Les trois z-index sont solidaires et explicites : la photo dessous (0), le calque au milieu (1), la légende au-dessus (2). Sans z-index sur le calque, le mélange ne s'applique plus du tout ; sans z-index sur la légende, le calque la recouvre et blanchit son liseré orange. */ .centre-photo::before{ content:""; position:absolute; inset:0; z-index:1; border-radius:2px; background:linear-gradient(155deg, var(--orange) 0%, var(--brique) 100%); mix-blend-mode:color; pointer-events:none; opacity:0; transition:opacity .55s var(--lisse); } /* Scopé au vrai survol : sur écran tactile, :hover colle après un appui et la photo resterait orange — ici c'est trop visible pour le laisser passer. */ @media (hover:hover){ .centre-photo:hover::before{ opacity:1 } .centre-photo:hover img{ filter:contrast(1.2) saturate(0) brightness(.9) } } .photo-lab{ position:absolute; left:0; bottom:0; right:0; z-index:2; padding:34px 18px 16px; background:linear-gradient(to top, rgba(30,34,35,.94), transparent); } .photo-lab span{ font:700 .64rem/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--blanc); display:inline-flex; align-items:center; gap:9px; } .photo-lab span::before{ content:""; width:22px; height:1.5px; background:var(--orange); flex:none; } /* Légende vide (apropos.appui = "") : sans ça il resterait le tiret orange flottant sur la photo, et le dégradé qui l'assombrit par le bas. Le :empty suffit pour le tiret ; le :has() emporte le dégradé avec. */ .photo-lab span:empty{ display:none } .photo-lab:has(span:empty){ display:none } .zones{ margin-top:38px; border-top:1px solid var(--ligne) } /* Trois colonnes : la croix, la vignette, le texte. La vignette est en 3:4 — les photos du cabinet sont toutes en portrait, on ne les couche pas de force. */ .zones li{ display:grid; grid-template-columns:20px 160px minmax(0,1fr); gap:24px; padding:24px 0; border-bottom:1px solid var(--ligne); align-items:start; } .zone-vue{ overflow:hidden; border-radius:2px; background:#000 } .zone-vue img{ display:block; width:100%; aspect-ratio:3/4; object-fit:cover; filter:contrast(1.04) saturate(.95); transition:transform .6s var(--lisse), filter .45s var(--lisse); } @media (hover:hover){ .zones li:hover .zone-vue img{ transform:scale(1.05); filter:contrast(1.06) saturate(1) } } /* Sous 700px, la vignette et le texte ne tiennent plus côte à côte : le texte tombait sous 200px et le badge « 60 m² » passait à la ligne. On empile, et la vignette devient un bandeau — le fichier est le même, c'est object-fit qui recadre. */ @media (max-width:700px){ .zones li{ grid-template-columns:20px minmax(0,1fr); grid-template-areas:"plus vue" ". txt"; gap:0 20px; } .zone-plus{ grid-area:plus } .zone-vue{ grid-area:vue; margin-bottom:18px } .zone-txt{ grid-area:txt } .zone-vue img{ aspect-ratio:16/9 } } .zone-plus{ position:relative; width:20px; height:20px; margin-top:5px; flex:none } .zone-plus::before,.zone-plus::after{ content:""; position:absolute; background:var(--orange); border-radius:2px; } .zone-plus::before{ left:0; right:0; top:8px; height:4px } .zone-plus::after{ top:0; bottom:0; left:8px; width:4px; background:var(--brique) } .zones h3{ font-size:1.06rem; font-weight:700; letter-spacing:-.015em; margin-bottom:7px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; } .zones h3 em{ font:700 .76rem/1 var(--sans); font-style:normal; letter-spacing:-.005em; color:var(--orange); padding:5px 8px; border:1px solid rgba(232,106,22,.4); border-radius:2px; } .zones h3 em:empty{ display:none } .zones p{ color:var(--gris); font-size:.96rem; line-height:1.6 } /* ═══════════════════ PRESTATIONS ═══════════════════ */ .prestations{ padding:var(--pad) 0; border-bottom:1px solid var(--ligne) } .presta-liste{ border-top:1px solid var(--ligne) } .presta{ display:grid; grid-template-columns:90px minmax(0,1fr) 44px; align-items:start; gap:0; padding:30px 0; border-bottom:1px solid var(--ligne); position:relative; transition:padding-left .4s var(--lisse); } .presta::before{ content:""; position:absolute; inset:0 -18px; background:linear-gradient(90deg, rgba(232,106,22,.07), transparent 62%); opacity:0; transition:opacity .4s var(--lisse); pointer-events:none; } .presta:hover::before{ opacity:1 } .presta:hover{ padding-left:14px } .presta-num{ font:700 .95rem/1 var(--mono); letter-spacing:.06em; color:rgba(242,240,238,.34); padding-top:.42em; transition:color .35s; } .presta:hover .presta-num{ color:var(--orange) } .presta-corps h3{ font-size:clamp(1.12rem,2vw,1.42rem); letter-spacing:-.024em; margin-bottom:11px; } .presta-txt{ color:#BFC5C5; font-size:.99rem; line-height:1.62; max-width:58ch } .presta-ex{ margin-top:14px; color:var(--gris); font:700 .72rem/1.7 var(--mono); letter-spacing:.04em; word-break:keep-all; /* évite les coupures dans « Pré-saison », « Post-opératoire » */ } .presta-plus{ position:relative; width:18px; height:18px; margin:.5em 0 0 auto; opacity:.3; transition:opacity .35s var(--lisse), transform .45s var(--lisse) } .presta-plus::before,.presta-plus::after{ content:""; position:absolute; background:var(--blanc); } .presta-plus::before{ left:0; right:0; top:8px; height:2px } .presta-plus::after{ top:0; bottom:0; left:8px; width:2px } .presta:hover .presta-plus{ opacity:1; transform:rotate(90deg) } .presta:hover .presta-plus::before,.presta:hover .presta-plus::after{ background:var(--orange) } /* ═══════════════════ LA GALERIE ═══════════════════ */ /* Une bande de portraits qui défile horizontalement, sous les prestations. Pourquoi pas une grille : les photos du cabinet sont toutes en portrait — une grille les écrase en vignettes ou les étire sur trois écrans. */ .galerie{ padding:var(--pad) 0; border-bottom:1px solid var(--ligne) } .galerie .sec-head{ margin-bottom:clamp(32px,4vw,48px) } /* La gouttière de gauche aligne la PREMIÈRE vue sur le texte de la section ; à droite, la bande sort de l'écran — c'est ce débordement qui dit « ça continue ». Elle est portée par la MARGE de la bande, pas par le padding du rail : un pourcentage dans le padding d'une boîte en width:max-content se résout à zéro (les vues se collaient au bord gauche). Le « 100% » est ici la largeur du corps de page, donc hors barre de défilement — avec 100vw l'alignement dérivait de la largeur de la barre. overscroll-behavior-x:contain : sans lui, arrivé au bout, l'élan du trackpad rebondit dans le vide puis part chaîner sur la page. */ .galerie-bande{ margin-left:max(26px, calc((100% - 1180px) / 2 + 26px)); overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; } .galerie-bande::-webkit-scrollbar{ display:none } .galerie-bande:focus-visible{ outline-offset:-2px } /* ⚠ PAS de width:max-content ici. Les vues ont un flex-basis fixe : elles débordent toutes seules et créent le défilement. Avec max-content, WebKit ne dérive PAS la largeur du flex-basis mais de la largeur intrinsèque du contenu — soit 1160 px par photo au lieu de 364. La bande annonçait alors 8300 px au lieu de 3092 et on défilait 920 px dans le vide après la dernière image. Invisible sous Chrome, qui donne le bon chiffre. margin/padding remis à zéro à la main : la réinitialisation du haut de feuille couvre ul/dl/dd, pas ol — le retrait de 40 px du navigateur décalait la première vue et créait un point d'ancrage fantôme à 40 px. */ .galerie-rail{ --gap: clamp(14px,2vw,22px); --bout: 26px; /* la gouttière de page, celle de .wrap */ display:flex; gap:var(--gap); margin:0; padding:0; } /* La gouttière de fin est un vrai élément, pas un padding : le padding de fin d'un conteneur défilant n'entre pas dans la zone défilable sous WebKit — la dernière photo se collait au bord de l'écran. Le gap la précède déjà, on ne pose donc que le reste : gap + (bout − gap) = bout, à gauche comme à droite. */ .galerie-rail::after{ content:""; flex:0 0 max(0px, var(--bout) - var(--gap)) } .vue{ flex:0 0 clamp(248px,74vw,364px); scroll-snap-align:start } /* La figure EST le cadre : l'étiquette est posée sur la photo, donc une vue coupée au bord de la bande se coupe comme une image et non comme un paragraphe orphelin. */ .vue figure{ margin:0; position:relative; overflow:hidden; border-radius:2px; background:#000; } .vue img{ width:100%; aspect-ratio:3/4; object-fit:cover; filter:contrast(1.04) saturate(.95); transition:transform .7s var(--lisse), filter .45s var(--lisse); } @media (hover:hover){ .vue:hover img{ transform:scale(1.045); filter:contrast(1.08) saturate(1) } } /* Le voile n'est pas décoratif : l'étiquette est blanche et plusieurs photos ont un sol clair en bas de cadre. */ .vue figure::after{ content:""; position:absolute; inset:auto 0 0 0; height:46%; background:linear-gradient(to top, rgba(30,34,35,.94), rgba(30,34,35,0)); pointer-events:none; } .vue figcaption{ position:absolute; left:15px; right:15px; bottom:12px; z-index:2; display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; } /* Le numéro est peint comme au sol : chiffre mono, et au-dessus le segment de graduation orange — le même repère qu'en tête de chaque chiffre du centre. */ .vue-num{ font:700 1.9rem/1 var(--mono); letter-spacing:.01em; color:rgba(242,240,238,.92); flex:none; padding-top:13px; background-image:repeating-linear-gradient(to right,var(--orange) 0 1px,transparent 1px 8px); background-size:100% 7px; background-repeat:no-repeat; background-position:0 0; } .vue-nom{ font-size:.95rem; font-weight:700; letter-spacing:-.015em; color:var(--blanc); text-shadow:0 1px 12px rgba(30,34,35,.85); } /* Le pied : la même règle graduée qu'ailleurs, mais elle sert ici de barre de défilement — le segment orange dit où on en est ET combien il reste. Sans JS il garde sa largeur par défaut et reste un simple repère. */ .galerie-pied{ display:flex; align-items:center; gap:clamp(14px,2.2vw,26px); margin-top:clamp(26px,3.4vw,38px); } .galerie-regle{ position:relative; flex:1; height:21px; border-top:1px solid var(--ligne-fort) } .regle-ticks{ position:absolute; inset:0; background-image: linear-gradient(to right, rgba(242,240,238,.26) 0 1px, transparent 1px), linear-gradient(to right, rgba(242,240,238,.5) 0 1.5px, transparent 1.5px); background-size:2% 7px, 10% 15px; background-repeat:repeat-x; } .regle-curseur{ position:absolute; left:0; top:-2px; height:3px; width:30%; background:var(--orange); box-shadow:0 0 14px rgba(232,106,22,.55); transition:transform .12s linear; } .galerie-indice{ flex:none; font:700 .6rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--gris); transition:opacity .45s var(--lisse); } .galerie-indice::after{ content:" →"; color:var(--orange) } /* Une fois qu'on a poussé la bande, l'invitation n'a plus rien à dire. */ .galerie.parti .galerie-indice{ opacity:0 } /* Les deux flèches sont injectées par main.js — la barre de défilement native est masquée, il faut donc une prise à la souris. Elles se désactivent aux deux bouts : c'est aussi ce qui montre qu'on est arrivé au bout. */ .galerie-fleches{ display:flex; gap:8px; flex:none } .fleche{ width:38px; height:38px; padding:0; flex:none; display:grid; place-items:center; cursor:pointer; background:transparent; color:var(--blanc); border:1px solid var(--ligne-fort); border-radius:2px; transition:background .3s var(--lisse), border-color .3s var(--lisse), color .3s var(--lisse), opacity .3s var(--lisse); } .fleche svg{ width:17px; height:17px; fill:currentColor } @media (hover:hover){ .fleche:not(:disabled):hover{ background:var(--orange); border-color:var(--orange); color:#171A1A } } .fleche:disabled{ opacity:.3; cursor:default } /* Sur écran tactile on pousse la bande au doigt : les flèches ne servent à rien et prennent la place de la règle, déjà courte sur un téléphone. */ @media (pointer:coarse){ .galerie-fleches{ display:none } } /* ═══════════════════ ÉQUIPE ═══════════════════ */ .equipe{ padding:var(--pad) 0; border-bottom:1px solid var(--ligne); background:var(--noir-2) } /* Une ligne par kiné, séparée par un filet, plutôt que deux grandes tuiles côte à côte (le relevé) : la fiche se lit d'un trait — portrait, identité, formations — et l'absence de photo de Simon n'ouvre plus un carré vide de la taille du portrait de Luca. */ .equipe-liste{ display:grid } .membre{ display:grid; gap:18px 40px; align-items:start; padding:clamp(26px,3.4vw,40px) 0; border-top:1px solid var(--ligne); } .membre:last-child{ border-bottom:1px solid var(--ligne) } @media (min-width:64rem){ .membre{ grid-template-columns:9.5rem minmax(0,.85fr) minmax(0,1.3fr) } } .membre-photo{ width:9.5rem; aspect-ratio:1/1; margin:0; position:relative; overflow:hidden; border-radius:2px; background:var(--noir-3); } .membre-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; transition:transform 1.1s var(--lisse); } .membre:hover .membre-photo img{ transform:scale(1.05) } .membre-ident h3{ font-size:1.32rem; letter-spacing:-.028em; margin-bottom:6px } .membre-role{ font:700 .7rem/1.4 var(--mono); letter-spacing:.11em; text-transform:uppercase; color:var(--orange); } .membre-form .lab{ margin-bottom:9px } .membre-form .lab-suite{ margin-top:20px } .membre-txt{ color:var(--gris); font-size:.93rem; line-height:1.68 } /* Les formations sont un argument, pas une note de bas de page : l'intitulé passe en blanc gras sur sa ligne, l'organisme reste en mono discret dessous. */ .formations{ list-style:none; display:grid; gap:11px } .formations li{ position:relative; padding-left:16px } .formations li::before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:2px; background:var(--orange); } .formations strong{ display:block; color:var(--blanc); font-weight:700; font-size:.97rem; line-height:1.42; letter-spacing:-.012em; } .formations .orga{ display:block; margin-top:3px; color:var(--gris); font:700 .68rem/1.4 var(--mono); letter-spacing:.09em; text-transform:uppercase; } .formations .orga:empty{ display:none } /* #8E9595 et pas plus sombre : à 15 px, en dessous on passe sous le 4,5:1 du WCAG (l'ancien #7E8585 tombait à 3,96:1). */ .membre-suite{ color:#8E9595 } .membre-suite:empty,.membre-suite:empty + *{ display:none } /* ═══════════════════ CONTACT ═══════════════════ */ .contact{ padding:var(--pad) 0 } .contact-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr); gap:clamp(38px,5vw,70px); align-items:start; } .gros-tel{ display:inline-block; margin:8px 0 34px; font-size:clamp(1.85rem,4vw,2.7rem); font-weight:800; letter-spacing:-.04em; color:var(--orange); line-height:1; border-bottom:2px solid transparent; transition:border-color .3s, color .3s; } .gros-tel:hover{ border-bottom-color:var(--orange) } .coord{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px 26px; padding:24px 0; border-top:1px solid var(--ligne); border-bottom:1px solid var(--ligne); } .coord dt{ font:700 .61rem/1.7 var(--mono); letter-spacing:.15em; text-transform:uppercase; color:var(--gris); white-space:nowrap; } .coord dd{ font-size:.96rem; line-height:1.62 } .coord dd a{ border-bottom:1px solid rgba(232,106,22,.42); transition:color .25s, border-color .25s } .coord dd a:hover{ color:var(--orange); border-bottom-color:var(--orange) } .heures{ padding:26px 0 4px } .heures-liste{ margin:14px 0 0 } .heures-liste li{ display:flex; align-items:baseline; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; padding:10px 0 10px 14px; border-bottom:1px solid var(--ligne); color:var(--gris); font-size:.95rem; position:relative; } .heures-liste li::before{ content:""; position:absolute; left:0; top:50%; width:0; height:1.5px; background:var(--orange); transform:translateY(-50%); transition:width .5s var(--lisse); } .heures-liste li b{ font:700 .88rem/1 var(--mono); letter-spacing:.02em; white-space:nowrap } .heures-liste li.aujourdhui{ color:var(--blanc) } .heures-liste li.aujourdhui::before{ width:8px } /* marqueur du jour, ajouté sans toucher au HTML */ .heures-liste li.aujourdhui > span::after{ content:"aujourd’hui"; margin-left:11px; display:inline-block; font:700 .56rem/1 var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--orange); border:1px solid rgba(232,106,22,.42); border-radius:2px; padding:4px 6px; vertical-align:.1em; } .heures-note{ margin-top:14px; color:var(--gris); font-size:.86rem } .carte{ margin-top:28px; border:1px solid var(--ligne); border-radius:2px; overflow:hidden } .carte-load{ width:100%; display:flex; flex-direction:column; gap:7px; align-items:flex-start; padding:22px; background:var(--noir-2); border:0; cursor:pointer; color:var(--blanc); font-family:inherit; font-size:.97rem; font-weight:700; text-align:left; transition:background .3s; } .carte-load em{ font:500 .84rem/1.4 var(--sans); font-style:normal; color:var(--gris); } .carte-load:hover{ background:var(--noir-3) } .carte.chargee{ border-color:var(--ligne) } .carte iframe{ display:block; width:100%; height:280px; border:0; filter:grayscale(.28) contrast(1.05) } /* formulaire */ .contact-form{ background:var(--noir-2); border:1px solid var(--ligne); border-radius:2px; padding:clamp(24px,3vw,34px); } .form-titre{ font-size:1.24rem; font-weight:800; letter-spacing:-.028em; margin-bottom:24px; } .contact-form label{ display:block; margin:0 0 7px; font:700 .61rem/1.6 var(--mono); letter-spacing:.15em; text-transform:uppercase; color:var(--gris); } .contact-form input,.contact-form textarea{ width:100%; padding:13px 14px; margin-bottom:18px; background:var(--noir); border:1px solid rgba(242,240,238,.21); border-radius:2px; color:var(--blanc); font-family:inherit; font-size:.97rem; line-height:1.5; transition:border-color .25s, background .25s; } .contact-form input:focus,.contact-form textarea:focus{ outline:none; border-color:var(--orange); background:#1A1E1F; } .contact-form textarea{ resize:vertical; min-height:120px } .contact-form ::placeholder{ color:#6E7575 } .form-duo{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px } .contact-form .btn{ width:100%; margin-top:6px } .form-fine{ margin-top:16px; color:var(--gris); font-size:.81rem; line-height:1.56 } .form-fine a{ border-bottom:1px solid var(--ligne-fort) } .form-fine a:hover{ color:var(--orange); border-bottom-color:var(--orange) } /* ═══════════════════ PIED ═══════════════════ */ .pied{ border-top:1px solid var(--ligne); background:var(--noir-2); padding:48px 0 40px } .pied-in{ display:flex; flex-direction:column; gap:13px; align-items:flex-start } .pied-marque{ display:flex; align-items:baseline; gap:.14em; margin-bottom:6px } .pied-marque .marque-txt{ font-size:1.18rem } .pied-marque .plus{ width:.72em; height:.72em; font-size:1.18rem } .pied-marque em{ font:500 .84rem/1 var(--sans); font-style:normal; color:var(--gris); padding-left:14px; margin-left:6px; border-left:1px solid var(--ligne); } .pied-nap{ font:700 .8rem/1.6 var(--mono); letter-spacing:.03em; color:var(--gris) } .pied-nap span,.pied-nap a{ white-space:nowrap } .pied-nap a:hover{ color:var(--orange) } .pied-legal{ font-size:.86rem; color:var(--gris) } .pied-legal a{ border-bottom:1px solid var(--ligne-fort) } .pied-legal a:hover{ color:var(--orange); border-bottom-color:var(--orange) } .pied-credit{ margin-top:12px; font-size:.82rem; color:#767D7D } .pied-credit strong{ color:var(--gris); font-weight:700 } /* ═══════════════════ BARRE POUCE (mobile) ═══════════════════ */ .pouce{ position:fixed; left:0; right:0; bottom:0; z-index:70; display:none; gap:1px; background:var(--ligne); border-top:1px solid var(--ligne); backdrop-filter:blur(12px); } .pouce a{ flex:1; text-align:center; padding:15px 8px; font-size:.92rem; font-weight:700; letter-spacing:-.01em; } .pouce-tel{ background:rgba(36,40,40,.95); color:var(--blanc) } .pouce-rdv{ background:var(--orange); color:#171A1A } /* ═══════════════════ RÉVÉLATIONS ═══════════════════ */ .js [data-vu]{ opacity:0; transform:translateY(20px); transition:opacity .75s var(--lisse), transform .75s var(--lisse); } .js [data-vu].vu{ opacity:1; transform:none } .js .chiffre:nth-child(2){ transition-delay:.09s } .js .chiffre:nth-child(3){ transition-delay:.18s } .js .chiffre:nth-child(4){ transition-delay:.27s } .js .zones li:nth-child(2){ transition-delay:.06s } .js .zones li:nth-child(3){ transition-delay:.12s } .js .zones li:nth-child(4){ transition-delay:.18s } .js .presta:nth-child(2){ transition-delay:.07s } .js .presta:nth-child(3){ transition-delay:.14s } .js .presta:nth-child(4){ transition-delay:.21s } .js .membre:nth-child(2){ transition-delay:.1s } /* le titre du hero : les mots montent depuis leur ligne */ .js .hero-titre .mot > span{ transform:translateY(108%); transition:transform 1.05s cubic-bezier(.16,.86,.24,1); } .js .hero-titre.vu .mot > span{ transform:none } .js .hero-titre .mot:nth-child(2) > span{ transition-delay:.11s } .js .hero-titre .mot:nth-child(3) > span{ transition-delay:.22s } .js .hero-titre .mot:nth-child(4) > span{ transition-delay:.33s } /* le « + » se referme au chargement : les deux barres se croisent */ .js .marque .plus-h{ animation:barreH .95s var(--lisse) .15s both } .js .marque .plus-v{ animation:barreV .95s var(--lisse) .28s both } .js .marque .plus-c{ animation:recouvre .5s var(--lisse) .95s both } @keyframes barreH{ from{ transform:translateX(-46%); opacity:0 } to{ transform:none; opacity:1 } } @keyframes barreV{ from{ transform:translateY(-46%); opacity:0 } to{ transform:none; opacity:1 } } @keyframes recouvre{ from{ opacity:0 } to{ opacity:1 } } /* le + des zones se dessine à la révélation */ .js .zones li .zone-plus::before{ transform:scaleX(0); transform-origin:left; transition:transform .6s var(--lisse) .12s } .js .zones li .zone-plus::after{ transform:scaleY(0); transform-origin:top; transition:transform .6s var(--lisse) .3s } .js .zones li.vu .zone-plus::before{ transform:none } .js .zones li.vu .zone-plus::after{ transform:none } /* ═══════════════════ RESPONSIVE ═══════════════════ */ @media (max-width:1000px){ .centre-grid{ grid-template-columns:1fr } /* relative et non static : il faut annuler le sticky SANS cesser d'être le bloc de référence de .photo-lab — en static, la légende allait se caler sur le bloc conteneur initial et sortait de l'écran (elle était donc invisible sur téléphone, en silence, depuis le début). */ .centre-photo{ position:relative; top:0; max-width:520px } .centre-photo img{ aspect-ratio:4/3 } .contact-grid{ grid-template-columns:1fr } .chiffres-grid{ grid-template-columns:repeat(2,1fr) } } @media (max-width:860px){ .liens{ display:none } .marque{ margin-right:auto } .pouce{ display:flex } body{ padding-bottom:56px } .hero{ padding:118px 0 104px; min-height:auto } .hero-fond img{ object-position:50% 58% } .presta{ grid-template-columns:56px minmax(0,1fr); gap:0 4px } .presta-plus{ display:none } .presta:hover{ padding-left:0 } .form-duo{ grid-template-columns:1fr } .pied-marque em{ padding-left:11px; margin-left:4px } } @media (max-width:560px){ body{ font-size:16px } /* la bande garde l'alignement de .wrap, qui passe à 18px juste en dessous */ .galerie-bande{ margin-left:18px } .galerie-rail{ --bout:18px } .galerie-pied{ gap:12px } .barre-in{ padding:13px 18px; gap:12px } .tel-btn span{ display:none } .tel-btn{ padding:11px 12px } .wrap,.hero-in{ padding:0 18px } .chiffres-grid{ grid-template-columns:repeat(2,1fr); gap:34px 22px } .membre-photo{ width:8rem } .sur-titre{ font-size:.6rem; letter-spacing:.13em } .statut{ font-size:.66rem } .statut-note{ padding-left:0; border-left:0; flex-basis:100% } .piste{ height:38px } .piste-nums{ display:none } /* trop serré sous 560px : on garde les graduations seules */ .coord{ grid-template-columns:1fr; gap:4px 0 } .coord dt{ margin-top:12px } .coord dt:first-child{ margin-top:0 } .hero-actions .btn{ flex:1 1 100% } } /* ═══════════════════ MOUVEMENT RÉDUIT ═══════════════════ */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .js [data-vu]{ opacity:1; transform:none } .js .hero-titre .mot > span{ transform:none } .js .zones li .zone-plus::before,.js .zones li .zone-plus::after{ transform:none } .jauge{ display:none } } /* ═══════════════════ PAGES GÉNÉRÉES (mentions, merci) ═══════════════════ */ .legal-wrap,.merci-wrap{ padding-top:104px !important } .legal-wrap h2{ color:var(--orange) !important; font-size:1.16rem; letter-spacing:-.02em } .legal-wrap strong,.legal-wrap h1{ color:var(--blanc) } .legal-wrap a,.merci-wrap a.mail{ color:var(--orange) } .legal-wrap ul{ padding-left:18px } .legal-wrap li{ list-style:disc } .retour{ font:700 .8rem/1 var(--mono) !important; letter-spacing:.1em; text-transform:uppercase } /* Pot de miel Netlify : le champ que seuls les robots remplissent. Sorti de l'écran plutôt que display:none — un lecteur d'écran doit pouvoir l'ignorer sans que le navigateur le retire du formulaire envoyé. */ .hidden-field{position:absolute;left:-9999px} /* La note « téléphone ou email » : discrète, juste sous le duo, mais lisible — c'est une consigne de saisie, pas une mention légale. */ .form-note-contact{margin:-.35rem 0 .2rem;font-size:.82rem;opacity:.72}