/* ========================================================= REGLE D'ARCHITECTURE : une information = un seul endroit. Seuls les APPELS A L'ACTION (bouton RDV, telephone) sont volontairement repetes, parce qu'ils convertissent. ========================================================= */ :root{ --titre:"Poppins","Segoe UI",Helvetica,Arial,sans-serif; --texte:"Open Sans","Segoe UI",Helvetica,Arial,sans-serif; --gut:clamp(1.15rem,3.6vw,4rem); --r:14px; --r-l:24px; --t:.35s cubic-bezier(.4,0,.2,1); } /* Le theme clair est aussi le defaut, pour que la page s'affiche correctement meme si aucun attribut data-theme n'est pose sur . Les alias "light" et "dark" permettent au lecteur de page publiee de piloter le theme avec son propre bouton, en plus du notre. */ :root,:root[data-theme="clair"],:root[data-theme="light"]{ --bg:#FBF9F5; --surface:#FFFFFF; --surface-2:#F4EFE9; --ink:#241820; --ink-2:#584A52; --muted:#8B7C84; --line:rgba(36,24,32,.12); --primary:#7A1440; --primary-2:#99194F; --on-primary:#FFFFFF; --accent:#C26A00; --accent-soft:#FBEEDC; --warm:#F3E3D0; --sh:0 1px 2px rgba(36,24,32,.05),0 10px 30px -14px rgba(36,24,32,.18); --sh-2:0 2px 6px rgba(36,24,32,.06),0 26px 54px -22px rgba(36,24,32,.3); /* hero clair : voile blanc, texte sombre */ --hero-fond:radial-gradient(88% 118% at 78% 16%,rgba(194,106,0,.15),transparent 58%), linear-gradient(115deg,#F7EEE6 0%,#FCF8F2 52%,#F4E8E5 100%); --hero-voile:linear-gradient(100deg,rgba(251,249,245,.97) 0%,rgba(251,249,245,.84) 40%,rgba(251,249,245,.18) 100%); --hero-tex:rgba(36,24,32,.05); --hero-ink:#241820; --hero-span:#7A1440; --hero-lede:#584A52; --hero-note:rgba(36,24,32,.38); --hero-btn:#7A1440; --hero-btn-ink:#FFFFFF; --hero-o-ink:#241820; --hero-o-bord:rgba(36,24,32,.28); } :root[data-theme="sombre"],:root[data-theme="dark"]{ --bg:#241A20; --surface:#302330; --surface-2:#3B2C39; --ink:#F2EAEE; --ink-2:#CDBCC5; --muted:#9A8892; --line:rgba(242,234,238,.16); --primary:#E0799F; --primary-2:#EA93B2; --on-primary:#2A0E1C; --accent:#F19200; --accent-soft:rgba(241,146,0,.16); --warm:#453341; --sh:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.6); --sh-2:0 2px 6px rgba(0,0,0,.4),0 26px 54px -22px rgba(0,0,0,.75); /* hero sombre : voile encre, texte blanc */ --hero-fond:radial-gradient(88% 118% at 78% 16%,rgba(224,121,159,.3),transparent 58%), linear-gradient(115deg,#1E1018 0%,#3C1730 52%,#511A3A 100%); --hero-voile:linear-gradient(100deg,rgba(20,10,15,.94) 0%,rgba(20,10,15,.78) 46%,rgba(20,10,15,.42) 100%); --hero-tex:rgba(255,255,255,.045); --hero-ink:#FFFFFF; --hero-span:#F0A8C4; --hero-lede:rgba(245,235,240,.9); --hero-note:rgba(245,235,240,.42); --hero-btn:#FFFFFF; --hero-btn-ink:#3C1730; --hero-o-ink:#FFFFFF; --hero-o-bord:rgba(255,255,255,.45); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background-color:var(--bg);color:var(--ink);font-family:var(--texte);font-size:16px; line-height:1.65;-webkit-font-smoothing:antialiased;transition:background-color var(--t),color var(--t)} .no-anim,.no-anim *,.no-anim *::before,.no-anim *::after{transition:none!important} a{color:inherit;text-decoration:none} .wrap{max-width:1280px;margin:0 auto;padding:0 var(--gut)} h1,h2,h3,h4,h5{font-family:var(--titre);font-weight:600;letter-spacing:-.02em;line-height:1.12} .lab{font-family:var(--titre);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--titre); font-weight:600;font-size:.9rem;padding:.85rem 1.6rem;border-radius:100px;background:var(--primary); color:var(--on-primary);border:2px solid var(--primary);transition:var(--t);cursor:pointer;text-align:center} .btn:hover{background:var(--primary-2);border-color:var(--primary-2);transform:translateY(-2px);box-shadow:var(--sh-2)} .btn-o{background:transparent;color:var(--ink);border-color:var(--line)} .btn-o:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)} /* .btn etant en inline-flex, un bouton pleine largeur a besoin de cette regle, sinon il garde sa largeur naturelle et deborde sur petit ecran */ .btn-full{width:100%} .nav .btn{white-space:nowrap} .lbl-court{display:none} /* zone photo : placeholder auto-documente, remplace par une vraie image */ .photo{position:relative;border-radius:var(--r-l);overflow:hidden;background:var(--surface-2); border:1px dashed var(--line);display:grid;place-items:center;text-align:center;padding:1.5rem} .photo .pl{max-width:26ch} .photo .pl i{font-style:normal;font-size:1.6rem;display:block;margin-bottom:.6rem;opacity:.5} .photo .pl b{font-family:var(--titre);font-size:.76rem;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.3rem} .photo .pl span{font-size:.78rem;color:var(--muted);line-height:1.5} .theme{position:fixed;right:1rem;bottom:1rem;z-index:9999;display:flex;gap:.25rem;background:var(--surface); border:1px solid var(--line);border-radius:100px;padding:.28rem;box-shadow:var(--sh-2)} .theme button{font-family:var(--titre);font-size:.72rem;font-weight:600;padding:.45rem .8rem;border:0; border-radius:100px;background:transparent;color:var(--muted);cursor:pointer;transition:var(--t)} .theme button.on{background:var(--primary);color:var(--on-primary)} /* >>> HEADER:CSS:DEBUT <<< */ /* Icones vectorielles. Emises en 1em, elles heritent de la taille de police de leur contexte : le CSS ecrit pour les emoji continue de s'appliquer. */ .icn{display:inline-block;vertical-align:-.14em;flex:0 0 auto;overflow:visible} /* ===== HEADER A DEUX NIVEAUX ===== Bandeau de service : navigation secondaire (cabinet, prescripteurs). Elle n'apparait qu'ici, jamais en double dans le menu principal. Rangee principale : logo, navigation principale, actions. Sans le tiroir, le site n'etait pas navigable en dessous de 1040px. */ header{position:sticky;top:0;z-index:900;background:var(--bg);border-bottom:1px solid var(--line)} /* --- bandeau de service --- */ .hdr-serv{background:var(--surface-2);border-bottom:1px solid var(--line)} .hdr-serv-row{display:flex;align-items:center;justify-content:space-between;gap:1rem; padding-top:.42rem;padding-bottom:.42rem;font-family:var(--titre);font-size:.78rem} .hdr-lieux{color:var(--muted);font-weight:500;letter-spacing:.02em;white-space:nowrap} .hdr-lieux i{font-style:normal;opacity:.45;margin:0 .4rem} .hdr-liens{display:flex;gap:1.5rem} .hdr-liens a{color:var(--ink-2);font-weight:500;transition:var(--t);white-space:nowrap} .hdr-liens a:hover{color:var(--accent)} /* --- rangee principale --- */ .nav{display:flex;align-items:center;justify-content:space-between;gap:1.4rem; padding-top:.5rem;padding-bottom:.5rem} /* libelle long par defaut, libelle court en dessous de 760px. Ces deux regles doivent rester dans le bloc header : sans elles, le bouton affiche ses deux libelles et deborde. */ .nav .btn{white-space:nowrap} .lbl-court{display:none} .brand{display:flex;align-items:center;gap:.7rem;flex:0 0 auto} /* Logo : PNG a fond transparent, de rapport 6,26. A 38px de haut il occupe 238px de large : c'est l'element le plus large de la rangee, d'ou le menu principal limite a trois entrees. */ .logo-img{height:75px;width:auto;display:block} /* Deux fichiers plutot qu'un filtre : l'inversion en blanc plein detruisait l'orange et le pourpre. La version sombre ne blanchit que le lettrage. */ /* OceanWP imprime en bas de page son tiroir de panier et son apercu rapide. Prives de son CSS, ils s'affichaient en clair comme du contenu brut sous le pied de page. Nos pages ont leur propre panier. */ #oceanwp-cart-sidebar-wrap,#owp-qv-wrap{display:none!important} .logo-sombre{display:none} :root[data-theme="sombre"] .logo-clair, :root[data-theme="dark"] .logo-clair{display:none} :root[data-theme="sombre"] .logo-sombre, :root[data-theme="dark"] .logo-sombre{display:block} footer .logo-img{height:55px} .menu{display:flex;align-items:center;gap:.35rem;font-family:var(--titre);font-size:.88rem;font-weight:500} .mi{position:relative} .mi > a{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink-2); padding:.7rem 1.1rem;border-radius:10px;transition:var(--t);white-space:nowrap} .mi > a:hover,.mi.open > a,.mi > a.on{color:var(--primary);background:var(--surface-2)} .chev{font-style:normal;font-size:.58rem;opacity:.5;transition:transform var(--t)} .mi.open .chev{transform:rotate(180deg)} .sub{position:absolute;top:calc(100% + .4rem);left:0;background:var(--surface); border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-2);padding:.6rem; min-width:262px;max-height:min(70vh,420px);overflow-y:auto; opacity:0;visibility:hidden;transform:translateY(-7px); transition:var(--t);z-index:20} .mi.open .sub{opacity:1;visibility:visible;transform:none} .sub a{display:block;padding:.5rem .75rem;border-radius:8px;font-size:.85rem; font-weight:400;color:var(--ink-2);font-family:var(--texte)} .sub a:hover{background:var(--accent-soft);color:var(--accent)} .sub-large{display:grid;grid-template-columns:repeat(3,minmax(168px,1fr));gap:0 .9rem;min-width:590px} .sub-large.pos-right{left:auto;right:0} .sub h4{font-family:var(--titre);font-size:.65rem;font-weight:600;letter-spacing:.13em; text-transform:uppercase;color:var(--muted);padding:.5rem .75rem .2rem;margin:0} .hactions{display:flex;align-items:center;gap:.5rem;flex:0 0 auto} /* icones sans bordure : quatre cadres cote a cote alourdissaient la rangee */ .ic-btn{width:44px;height:44px;border-radius:12px;border:0;display:grid; place-items:center;font-size:1.4rem;transition:var(--t);position:relative;color:var(--ink-2); background:transparent;cursor:pointer} /* trait legerement epaissi : a cette taille, 1,75 paraissait trop fin */ .ic-btn .icn{stroke-width:1.9} .ic-btn:hover{background:var(--surface-2);color:var(--primary)} .ic-btn b{position:absolute;top:3px;right:3px;background:var(--accent);color:#fff; font-family:var(--titre);font-size:.58rem;font-weight:700;width:17px;height:17px; border-radius:50%;display:grid;place-items:center} .hactions .btn{margin-left:.35rem} .burger{display:none} /* Le bouton porte les deux icones ; c'est aria-expanded qui decide laquelle s'affiche. Reecrire son contenu en JavaScript ramenait un emoji. */ .burger .i-fermer{display:none} .burger[aria-expanded="true"] .i-menu{display:none} .burger[aria-expanded="true"] .i-fermer{display:block} /* tiroir mobile */ .drawer{display:none;border-top:1px solid var(--line);background:var(--bg); max-height:calc(100dvh - 62px);overflow-y:auto;padding:.6rem var(--gut) 2rem} .drawer.open{display:block} .drawer .grp{padding:1rem 0;border-bottom:1px solid var(--line)} .drawer .grp > b{font-family:var(--titre);font-size:.68rem;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.45rem} .drawer a{display:block;padding:.5rem 0;font-family:var(--titre);font-size:.95rem; font-weight:500;color:var(--ink);transition:var(--t)} .drawer a:hover{color:var(--primary);padding-left:.35rem} .drawer .sous a{font-weight:400;font-size:.88rem;color:var(--ink-2);padding-left:.9rem} .drawer .actions{padding-top:1.3rem;display:grid;gap:.6rem} @media(max-width:1100px){ .menu{display:none} .burger{display:grid;place-items:center} } /* sous 900px le bandeau disparait : ses liens sont dans le tiroir */ @media(max-width:900px){.hdr-serv{display:none}} @media(max-width:760px){ .logo-img{height:59px} .nav .btn{padding:.68rem 1.1rem;font-size:.84rem} .lbl-long{display:none} .lbl-court{display:inline} } @media(max-width:600px){.nav .btn{display:none}} @media(max-width:520px){.logo-img{height:49px}} @media(max-width:420px){ .logo-img{height:42px} .ic-btn{width:36px;height:36px} .hactions{gap:.3rem} .ic-compte{display:none} /* le compte reste accessible depuis le tiroir */ } /* >>> HEADER:CSS:FIN <<< */ /* ===== HERO PLEIN CADRE ===== L'image de fond se pose via la variable --hero-img, posee en style sur .hero. Sans image, le degrade --hero-fond fait office de fond fini. Le voile --hero-voile s'adapte au theme et garantit la lisibilite du texte. */ .hero{position:relative;overflow:hidden;display:flex;align-items:center; min-height:clamp(430px,64vh,650px);padding:clamp(3rem,7vw,5.5rem) 0; background:var(--hero-fond)} .hero-bg{position:absolute;inset:0;z-index:0;background-image:var(--hero-img,none); background-size:cover;background-position:center right} .hero-bg::after{content:"";position:absolute;inset:0;background:var(--hero-voile)} .hero-tex{position:absolute;inset:0;z-index:0;opacity:.55;pointer-events:none; background-image:repeating-linear-gradient(58deg,var(--hero-tex) 0 1px,transparent 1px 9px)} .hero-in{position:relative;z-index:1;width:100%;max-width:1280px;margin:0 auto;padding:0 var(--gut)} .chip{display:inline-flex;align-items:center;gap:.5rem;background:var(--accent-soft);color:var(--accent); padding:.42rem 1rem;border-radius:100px;font-family:var(--titre);font-size:.78rem;font-weight:600} .chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)} h1{font-size:clamp(2.15rem,5vw,3.55rem);margin:1.4rem 0 0;letter-spacing:-.035em;font-weight:700} .lede{margin-top:1.4rem;font-size:clamp(1rem,1.3vw,1.12rem);color:var(--ink-2);max-width:48ch;line-height:1.8} .hero h1{color:var(--hero-ink);max-width:17ch;text-wrap:balance} .hero h1 span{color:var(--hero-span);display:block} .hero .lede{color:var(--hero-lede);max-width:52ch} .hero .acts{margin-top:2.1rem;display:flex;gap:.8rem;flex-wrap:wrap} .hero .btn{background:var(--hero-btn);color:var(--hero-btn-ink);border-color:var(--hero-btn)} .hero .btn:hover{background:var(--accent);border-color:var(--accent);color:#FFFFFF} .hero .btn-o{background:transparent;color:var(--hero-o-ink);border-color:var(--hero-o-bord)} .hero .btn-o:hover{background:var(--hero-o-ink);color:var(--bg);border-color:var(--hero-o-ink)} .hero-note{margin-top:2.2rem;font-family:var(--titre);font-size:.7rem;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--hero-note);border-top:1px solid var(--line); padding-top:.9rem;display:inline-block} /* ===== SECTIONS ===== */ section{padding:clamp(3rem,6vw,5.5rem) 0} .shead{max-width:62ch;margin-bottom:2.6rem} .shead.row{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap} h2{font-size:clamp(1.65rem,3.4vw,2.5rem);margin:.7rem 0 .9rem;font-weight:700} .shead p{color:var(--ink-2);font-size:1rem;line-height:1.8;max-width:58ch} /* --- SOINS : section unique et exhaustive --- */ .soins{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem} .soin{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l); padding:1.6rem 1.4rem;transition:var(--t);display:flex;flex-direction:column} .soin:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:transparent} .soin .ic{width:46px;height:46px;border-radius:13px;background:var(--accent-soft);display:grid; place-items:center;font-size:1.3rem;margin-bottom:1rem} .soin h3{font-size:1.08rem;margin-bottom:.5rem} .soin p{font-size:.86rem;color:var(--ink-2);line-height:1.7;flex:1} .soin .go{margin-top:1rem;font-family:var(--titre);font-size:.8rem;font-weight:600;color:var(--primary)} .soin .go i{font-style:normal;display:inline-block;transition:var(--t)} .soin:hover .go i{transform:translateX(5px)} .soin.vedette{grid-column:span 2;background:var(--primary);color:var(--on-primary);border-color:var(--primary)} .soin.vedette .ic{background:rgba(255,255,255,.16)} .soin.vedette p{color:rgba(255,255,255,.88);font-size:.95rem} .soin.vedette .go{color:var(--on-primary)} .soin.vedette h3{font-size:1.55rem} .soin.vedette .tagv{display:inline-block;font-family:var(--titre);font-size:.66rem;font-weight:600; letter-spacing:.14em;text-transform:uppercase;background:rgba(255,255,255,.2); padding:.26rem .72rem;border-radius:100px;margin-bottom:.9rem;align-self:flex-start} @media(max-width:1020px){.soins{grid-template-columns:1fr 1fr}} @media(max-width:600px){.soins{grid-template-columns:1fr}.soin.vedette{grid-column:auto}} /* --- SEMELLES : seul endroit ou vit le detail du parcours --- */ .parc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden; display:grid;grid-template-columns:.92fr 1.08fr} .parc-vis{position:relative;min-height:100%;overflow:hidden;border-right:1px solid var(--line)} .parc-vis .photo{height:100%;border:0;border-radius:0} .parc-vis .sec-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1} .parc-txt{padding:clamp(1.8rem,3.6vw,3rem)} .parc-txt > p{color:var(--ink-2);line-height:1.8;max-width:44ch;margin-bottom:1.8rem} .etapes{display:grid;gap:.75rem} .etape{display:flex;gap:1.05rem;align-items:flex-start;background:var(--bg);border:1px solid var(--line); border-radius:var(--r);padding:1rem 1.15rem;transition:var(--t)} .etape:hover{transform:translateX(6px);border-color:var(--accent)} .etape b{font-family:var(--titre);font-size:1.1rem;font-weight:700;color:var(--accent);flex:0 0 auto;width:1.9rem} .etape strong{font-family:var(--titre);font-size:.93rem;font-weight:600;display:block;margin-bottom:.12rem} .etape span{font-size:.83rem;color:var(--muted);line-height:1.6} @media(max-width:900px){.parc{grid-template-columns:1fr}.parc-vis .photo{aspect-ratio:16/9;border-right:0;border-bottom:1px solid var(--line)}} /* --- BOUTIQUE : parle du fonctionnement d'achat, pas du catalogue --- */ .shopwrap{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .two{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem} .bx{border-radius:var(--r-l);padding:clamp(1.6rem,3vw,2.4rem);border:1px solid var(--line);background:var(--bg)} .bx.pro{background:linear-gradient(160deg,var(--warm),var(--surface))} .badge{display:inline-block;font-family:var(--titre);font-size:.68rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;padding:.32rem .85rem;border-radius:100px} .b1{background:var(--accent);color:#fff} .b2{background:var(--primary);color:var(--on-primary)} .bx h3{font-size:clamp(1.25rem,2.2vw,1.55rem);margin:.9rem 0 .7rem} .bx > p{font-size:.92rem;color:var(--ink-2);line-height:1.75;max-width:40ch;margin-bottom:1.5rem} @media(max-width:860px){.two{grid-template-columns:1fr}} /* --- PATHOLOGIES --- */ .clusters{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem} .cl{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:1.6rem 1.5rem} .cl h4{font-size:1.05rem;margin-bottom:1rem;padding-bottom:.7rem;border-bottom:1px solid var(--line); display:flex;justify-content:space-between;align-items:center;gap:.6rem} .cl h4 em{font-style:normal;font-family:var(--texte);font-size:.72rem;color:var(--muted);font-weight:400;white-space:nowrap} .cl a{display:block;padding:.4rem 0;font-size:.88rem;color:var(--ink-2);transition:var(--t)} .cl a:hover{color:var(--accent);padding-left:.4rem} @media(max-width:900px){.clusters{grid-template-columns:1fr}} /* --- CTA FINAL : action, pas information --- */ .final{background:var(--primary);color:var(--on-primary);border-radius:var(--r-l); padding:clamp(2rem,4.5vw,3.4rem);display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap} .final h2{margin:0 0 .5rem;color:var(--on-primary)} .final p{color:rgba(255,255,255,.82);max-width:50ch;font-size:.97rem} .final .btn{background:var(--on-primary);color:var(--primary);border-color:var(--on-primary)} .final .btn:hover{background:transparent;color:var(--on-primary)} :root[data-theme="sombre"] .final .btn{color:#05201B} /* ===== FOOTER : seul endroit ou vivent adresses, horaires, email ===== */ footer{background:var(--surface);border-top:1px solid var(--line);padding:clamp(2.6rem,5vw,4rem) 0 1.8rem;margin-top:clamp(2.5rem,5vw,4rem)} .fg{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.2rem;padding-bottom:2rem;border-bottom:1px solid var(--line)} footer h5{font-family:var(--titre);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase; color:var(--accent);margin-bottom:1rem} footer p,footer a{font-size:.87rem;color:var(--ink-2);line-height:1.85;display:block} footer a:hover{color:var(--primary)} .fbrand{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem} .fl{margin-top:1.4rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap; font-size:.76rem;color:var(--muted)} @media(max-width:900px){.fg{grid-template-columns:1fr 1fr}} @media(max-width:540px){.fg{grid-template-columns:1fr}} .up{opacity:0;transform:translateY(20px);animation:up .8s cubic-bezier(.16,1,.3,1) forwards} @keyframes up{to{opacity:1;transform:none}} .d1{animation-delay:.05s}.d2{animation-delay:.12s}.d3{animation-delay:.19s}.d4{animation-delay:.26s} /* ===== AIDE A LA PRESCRIPTION ===== */ :root,:root[data-theme="clair"],:root[data-theme="light"]{--alerte:#B4552F;--alerte-soft:#F8EBE4} :root[data-theme="sombre"],:root[data-theme="dark"]{--alerte:#E89B76;--alerte-soft:rgba(180,85,47,.18)} .phero{background:var(--surface);border-bottom:1px solid var(--line);padding:clamp(1.8rem,3.5vw,2.8rem) 0} .phero h1{font-size:clamp(1.9rem,4.2vw,2.9rem);font-weight:700;margin:.9rem 0 .8rem} .phero p{color:var(--ink-2);max-width:60ch;line-height:1.8} .outils{position:sticky;top:62px;z-index:500;background:var(--bg); border-bottom:1px solid var(--line);padding:1rem 0} .recherche{position:relative;margin-bottom:.9rem} .recherche input{width:100%;padding:.95rem 1.1rem .95rem 2.9rem;border:2px solid var(--line); border-radius:100px;background:var(--surface);color:var(--ink); font-family:var(--texte);font-size:1rem} .recherche input:focus{outline:none;border-color:var(--accent)} .zones{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center} .zones button{font-family:var(--titre);font-size:.8rem;font-weight:500;padding:.45rem 1rem; border-radius:100px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2); cursor:pointer;transition:var(--t)} .zones button:hover{border-color:var(--primary);color:var(--primary)} .zones button.on{background:var(--primary);color:var(--on-primary);border-color:var(--primary)} .compte{margin-left:auto;font-size:.83rem;color:var(--muted);font-variant-numeric:tabular-nums} .groupe{padding-top:2.2rem} .groupe > h2{font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--accent);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)} .fiches{display:grid;gap:1.1rem} .fiche{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l); padding:clamp(1.3rem,2.5vw,1.8rem)} .fhead{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem; flex-wrap:wrap;margin-bottom:1.1rem} .fiche h3{font-size:clamp(1.1rem,2vw,1.35rem);margin:0} .fzone{font-family:var(--titre);font-size:.66rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;background:var(--accent-soft);color:var(--accent); padding:.3rem .8rem;border-radius:100px;white-space:nowrap} .options{display:grid;gap:.9rem} .option{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem} .option .dispo{font-family:var(--titre);font-weight:600;font-size:.98rem;margin-bottom:.6rem;display:block} .option .note{display:inline-block;font-size:.74rem;color:var(--alerte);background:var(--alerte-soft); padding:.22rem .6rem;border-radius:100px;margin-bottom:.6rem} .option ul{list-style:none;margin:0 0 .9rem;display:grid;gap:.28rem} .option li{font-size:.86rem;color:var(--ink-2);padding-left:1rem;position:relative;line-height:1.55} .option li::before{content:"·";position:absolute;left:.25rem;color:var(--accent);font-weight:700} .meta{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:.9rem} .meta div{font-size:.83rem;color:var(--ink-2);line-height:1.5} .meta b{display:block;font-family:var(--titre);font-size:.66rem;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);margin-bottom:.2rem} .ordo{display:flex;gap:.7rem;align-items:center;justify-content:space-between;flex-wrap:wrap; background:var(--accent-soft);border-radius:10px;padding:.8rem 1rem} .ordo .txt{font-family:var(--titre);font-weight:600;font-size:.92rem;color:var(--ink)} .ordo .lbl{display:block;font-family:var(--titre);font-size:.62rem;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--accent);margin-bottom:.15rem} .copier{font-family:var(--titre);font-size:.78rem;font-weight:600;padding:.5rem 1rem;border-radius:100px; border:1px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer; transition:var(--t);white-space:nowrap} .copier:hover{background:var(--accent);color:#fff} .copier.ok{background:var(--accent);color:#fff} .ordo-alerte{background:var(--alerte-soft)} .ordo-alerte .lbl{color:var(--alerte)} .alerte{margin-top:.6rem;background:var(--alerte-soft);border-left:3px solid var(--alerte);border-radius:8px;padding:.75rem .95rem} .alerte b{display:block;font-family:var(--titre);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--alerte);margin-bottom:.25rem} .alerte p{margin:0;font-size:.82rem;color:var(--ink-2);line-height:1.6} .rien{text-align:center;padding:3rem 1rem;color:var(--muted)} /* bloc de delivrance : sur mesure, produit boutique, ou cabinet */ .deliv{margin-top:.9rem;padding-top:.9rem;border-top:1px dashed var(--line); display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap} .dlbl{display:block;font-family:var(--titre);font-size:.62rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);margin-bottom:.15rem} .dtxt{display:block;font-family:var(--titre);font-weight:600;font-size:.9rem;color:var(--ink)} .dnote{display:block;font-size:.78rem;color:var(--muted);line-height:1.5;margin-top:.2rem;max-width:46ch} .dbtn{font-family:var(--titre);font-size:.8rem;font-weight:600;padding:.55rem 1.1rem;border-radius:100px; border:1px solid var(--line);color:var(--ink);transition:var(--t);white-space:nowrap} .dbtn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)} .deliv-produit .dlbl{color:var(--accent)} .deliv-produit .dbtn{background:var(--accent);border-color:var(--accent);color:#fff} .deliv-produit .dbtn:hover{background:transparent;color:var(--accent)} .deliv-mesure .dlbl{color:var(--primary)} .deliv-mesure .dbtn{background:var(--primary);border-color:var(--primary);color:var(--on-primary)} .deliv-mesure .dbtn:hover{background:transparent;color:var(--primary)} @media(max-width:560px){.meta{grid-template-columns:1fr}.deliv .dbtn{width:100%;text-align:center}} @media print{ header,.outils,.theme,footer,.copier,.phero p{display:none!important} .fiche{break-inside:avoid;border:1px solid #ccc} .groupe{padding-top:1rem} } /* >>> AIDE:CSS <<< */ /* les icones du sprite tirent leur taille d ici, pas d attributs repetes */ svg.icn{width:1em;height:1em} /* --- barre d'outils : elle doit se poser SOUS l'en-tete, pas dessous au sens de la profondeur. Elle collait a 62 px alors que l'en-tete en fait 127 : elle passait derriere lui des le premier defilement. La hauteur de repli suit les propres points de rupture de l'en-tete (bandeau de service masque sous 900 px, logo 75 / 59 / 49 / 42 px). Si ces valeurs changent dans le bloc HEADER, il faut les reporter ici. Le script de fin de page affine ensuite au pixel une fois les images chargees ; en cas d'echec, le repli laisse au pire un espace, jamais un recouvrement. Le script ne touche jamais a --hdr-h : il renseigne --hdr-mesure, et c'est max() qui arbitre. Le repli reste ainsi un plancher reactif aux points de rupture, meme apres un changement de taille de fenetre. --- */ :root{--hdr-h:127px} @media(max-width:900px){:root{--hdr-h:92px}} @media(max-width:760px){:root{--hdr-h:76px}} @media(max-width:520px){:root{--hdr-h:66px}} @media(max-width:420px){:root{--hdr-h:59px}} .outils{top:max(var(--hdr-h),var(--hdr-mesure,0px))} .groupe > h2{scroll-margin-top:calc(max(var(--hdr-h),var(--hdr-mesure,0px)) + 190px)} /* --- loupe : icone de la charte, l'ancienne regle emoji est supprimee --- */ .recherche .loupe{position:absolute;left:1.05rem;top:50%;transform:translateY(-50%); color:var(--muted);pointer-events:none;font-size:1.05rem;display:grid} /* --- filtres : une rangee de touches franches, avec l'icone de la zone --- */ .zones button{border-radius:9px;display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .85rem} .zones button svg{font-size:.95rem;opacity:.75} .zones button.on svg{opacity:1} /* Le compteur passe dans le champ de recherche. Sur telephone, les quatorze touches de zone se repliaient sur quatre lignes : la barre collante occupait 333 px, soit 41 % de l'ecran. Elles defilent maintenant horizontalement sur une seule ligne. */ .recherche input{padding-right:8.5rem} .recherche .compte{position:absolute;right:1.15rem;top:50%;transform:translateY(-50%); margin:0;pointer-events:none} @media(max-width:760px){ .zones{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none; -webkit-overflow-scrolling:touch;padding-bottom:.2rem} .zones::-webkit-scrollbar{display:none} .zones button{flex:0 0 auto} .recherche input{padding-right:7rem;font-size:16px} } /* --- Deux colonnes des que l'ecran le permet : la page faisait 32 000 px. On s'arrete a deux : a trois, les cartes devenaient si etroites que les titres passaient sur trois lignes et que la page paraissait en desordre. --- */ @media(min-width:1080px){.fiches{grid-template-columns:1fr 1fr;align-items:start}} /* --- En-tete de fiche : l'etiquette de zone se placait a droite du titre quand il tenait sur une ligne, et dessous quand il etait long. D'une carte a l'autre les titres ne commencaient donc pas a la meme hauteur. Elle est desormais toujours au-dessus. --- */ .fhead{flex-direction:column;align-items:flex-start;gap:.55rem;flex-wrap:nowrap} .fhead .fzone{order:-1} .fiche h3{line-height:1.25} /* --- formes plus franches sur les cartes --- */ .fiche{border-radius:14px} .option{border-radius:10px} .ordo{border-radius:8px} .alerte{border-radius:6px} .deliv{border-radius:8px} /* --- icones dans les intitules --- */ .groupe > h2{display:flex;align-items:center;gap:.55rem} .groupe > h2 svg{font-size:1.05rem} .fzone{display:inline-flex;align-items:center;gap:.4rem} .fzone svg{font-size:.95rem} .meta b{display:flex;align-items:center;gap:.35rem} .meta b svg{font-size:.9rem;color:var(--accent);opacity:.85} .ordo .lbl{display:flex;align-items:center;gap:.35rem} .ordo .lbl svg{font-size:.9rem} .copier{display:inline-flex;align-items:center;gap:.4rem} .copier svg{font-size:.95rem} /* >>> ACCUEIL:RETOUCHES <<< */ /* Premiere section : moins haute et moins aeree. Elle occupait presque tout l'ecran avant qu'on voie le moindre contenu. */ .hero{min-height:clamp(360px,52vh,520px);padding:clamp(2rem,4.5vw,3.4rem) 0} /* L'image etait cadree sur le mur et la fenetre. On descend le cadrage et on resserre, pour amener la semelle et l'orthese dans le champ. */ .hero-bg{background-size:118%;background-position:72% 78%} @media(max-width:900px){.hero-bg{background-size:cover;background-position:68% 82%}} .hero h1{font-size:clamp(2.1rem,4.8vw,3.5rem);margin-top:1rem} .hero .lede{margin-top:1.1rem} .hero .acts{margin-top:1.6rem} .hero-note{margin-top:1.5rem} /* Le choix du theme est masque tant que la version sombre n'est pas revue. La regle est volontairement facile a retirer. */ .theme{display:none}