/* ========================================================= 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} /* ===== PAGE CONTACT ===== L'accueil ne definit ni les variables d'alerte ni les encadres : on les ajoute ici, sinon l'avertissement du formulaire serait sans style. */ :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)} .enc{border-radius:var(--r);padding:1.2rem 1.4rem;border:1px solid transparent} .enc b{font-family:var(--titre);font-size:.72rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;display:block;margin-bottom:.5rem} .enc p{margin:0;font-size:.88rem;line-height:1.7;color:var(--ink-2)} .enc-alerte{background:var(--alerte-soft)} .enc-alerte b{color:var(--alerte)} .chero{background:var(--surface);border-bottom:1px solid var(--line); padding:clamp(2rem,4vw,3.2rem) 0 clamp(2rem,4vw,2.8rem)} .chero h1{font-size:clamp(1.9rem,4.2vw,2.9rem);font-weight:700;margin:1rem 0 .9rem} .chero p{color:var(--ink-2);max-width:56ch;line-height:1.8} .cabinets{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin:clamp(2.2rem,4vw,3.2rem) 0} .cab{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l); padding:clamp(1.6rem,3vw,2.2rem);display:flex;flex-direction:column} .cab .jour{display:inline-block;font-family:var(--titre);font-size:.68rem;font-weight:700; letter-spacing:.14em;text-transform:uppercase;background:var(--accent-soft);color:var(--accent); padding:.32rem .85rem;border-radius:100px;align-self:flex-start} .cab h2{font-size:clamp(1.25rem,2.3vw,1.6rem);margin:1rem 0 .9rem} .cab dl{margin:0 0 1.4rem;display:grid;gap:.85rem} .cab dt{font-family:var(--titre);font-size:.7rem;font-weight:600;letter-spacing:.13em; text-transform:uppercase;color:var(--muted);margin-bottom:.2rem} .cab dd{margin:0;font-size:.95rem;color:var(--ink);line-height:1.65} .cab dd a{color:var(--primary);font-weight:600} .cab dd a:hover{text-decoration:underline} .cab .actions{margin-top:auto;display:flex;gap:.7rem;flex-wrap:wrap} @media(max-width:820px){.cabinets{grid-template-columns:1fr}} .pratique{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-bottom:clamp(2.2rem,4vw,3.2rem)} .pr{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1.5rem} .pr b{display:block;font-family:var(--titre);font-size:.72rem;font-weight:600;letter-spacing:.13em; text-transform:uppercase;color:var(--accent);margin-bottom:.6rem} .pr p{font-size:.9rem;color:var(--ink-2);line-height:1.7;margin:0} @media(max-width:900px){.pratique{grid-template-columns:1fr}} .contactgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,3.5rem); padding-bottom:clamp(2.5rem,5vw,4rem);align-items:start} .contactgrid > *{min-width:0} /* Le champ piege doit rester invisible sans etre display:none : certains robots ignorent les champs masques de cette facon. */ .piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .req{color:var(--accent);font-weight:700} .fstatut{margin:1rem 0 0;padding:.85rem 1rem;border-radius:10px;font-size:.9rem; line-height:1.6;display:none} .fstatut.ok{display:block;background:var(--accent-soft);color:var(--ink)} .fstatut.ko{display:block;background:var(--alerte-soft);color:var(--alerte)} .formulaire button[aria-busy="true"]{opacity:.6;pointer-events:none} .fld input:invalid:not(:placeholder-shown),.fld textarea:invalid:not(:placeholder-shown){ border-color:var(--alerte)} .formulaire{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l); padding:clamp(1.6rem,3vw,2.4rem)} .formulaire h2{font-size:1.35rem;margin-bottom:.6rem} .formulaire > p{font-size:.9rem;color:var(--muted);line-height:1.7;margin-bottom:1.5rem} .frow{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:.85rem} .fld{display:block;margin-bottom:.85rem} .fld span{display:block;font-family:var(--titre);font-size:.76rem;font-weight:600; margin-bottom:.35rem;color:var(--ink-2)} .fld input,.fld select,.fld textarea{width:100%;padding:.72rem .9rem;border:1px solid var(--line); border-radius:10px;background:var(--bg);color:var(--ink);font-family:var(--texte);font-size:.9rem} .fld textarea{min-height:130px;resize:vertical} .fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--accent); outline-offset:1px;border-color:transparent} .consentement{display:flex;gap:.7rem;align-items:flex-start;margin:1.1rem 0 1.4rem; font-size:.84rem;color:var(--ink-2);line-height:1.6} .consentement input{margin-top:.25rem;flex:0 0 auto;width:auto} /* sans ce point de rupture, les deux colonnes se partagent 320px et le formulaire est ecrase a 110px de large : son contenu deborde alors */ @media(max-width:860px){.contactgrid{grid-template-columns:1fr}} @media(max-width:560px){.frow{grid-template-columns:1fr}} /* >>> 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} /* ===== SOMMAIRE DES PATHOLOGIES ===== */ .patho{padding-bottom:clamp(2.5rem,5vw,4rem)} .patho .ahead{max-width:none;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-l);margin:1.4rem 0 clamp(1.6rem,3vw,2.2rem); padding:clamp(1.5rem,3vw,2.2rem)} .patho .ahead h1{max-width:22ch;margin-bottom:.75rem} .patho .lede-art{font-size:clamp(1rem,1.4vw,1.1rem);line-height:1.75;color:var(--ink-2); max-width:62ch;margin:0 0 1.1rem} .patho .meta{border-top:0;padding-top:0} .patho .duree{color:var(--muted)} .patho .duree::before{content:"·";margin:0 .5rem;opacity:.5} /* raccourcis vers les zones */ .patho-zones{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:clamp(1.8rem,3.5vw,2.6rem)} .patho-zones a{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .95rem; border:1px solid var(--line);border-radius:10px;background:var(--surface); font-family:var(--titre);font-size:.85rem;font-weight:500;color:var(--ink-2);transition:var(--t)} .patho-zones a:hover{border-color:var(--accent);color:var(--accent)} .patho-zones a svg{font-size:1rem;opacity:.7} .patho-zones b{font-size:.72rem;color:var(--muted);font-weight:600} .patho-groupe{padding-top:1.6rem;scroll-margin-top:calc(var(--hdr-h,127px) + 1.5rem)} .patho-groupe > h2{display:flex;align-items:center;gap:.6rem;font-size:.76rem;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:1.1rem; padding-bottom:.55rem;border-bottom:1px solid var(--line)} .patho-groupe > h2 svg{font-size:1.1rem} .patho-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem} .patho-carte{display:flex;flex-direction:column;background:var(--surface); border:1px solid var(--line);border-radius:14px;padding:1.3rem 1.4rem;transition:var(--t)} .patho-carte:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--sh)} .patho-carte h3{font-family:var(--titre);font-size:1.06rem;font-weight:700;color:var(--ink); margin:0 0 .5rem;line-height:1.3} .patho-carte p{font-size:.87rem;color:var(--ink-2);line-height:1.65;margin:0 0 .9rem;flex:1} .patho-dispo{display:inline-flex;align-items:flex-start;gap:.45rem;font-family:var(--titre); font-size:.76rem;font-weight:600;color:var(--accent);background:var(--accent-soft); border-radius:8px;padding:.4rem .6rem;margin-bottom:.9rem;line-height:1.35} .patho-dispo svg{font-size:.9rem;flex:0 0 auto;margin-top:.05em} .patho-go{font-family:var(--titre);font-size:.82rem;font-weight:600;color:var(--primary); display:inline-flex;align-items:center;gap:.4rem} .patho-carte:hover .patho-go{color:var(--accent)} .patho-bas{margin-top:clamp(2.5rem,5vw,3.5rem);background:var(--surface); border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(1.5rem,3vw,2.2rem); display:flex;gap:2rem;align-items:center;justify-content:space-between;flex-wrap:wrap} .patho-bas b{font-family:var(--titre);font-size:1.1rem;font-weight:700;display:block; margin-bottom:.4rem;color:var(--ink)} .patho-bas p{font-size:.9rem;color:var(--ink-2);line-height:1.65;margin:0;max-width:52ch} .patho-acts{display:flex;gap:.7rem;flex-wrap:wrap} @media(max-width:560px){.patho-acts{width:100%}.patho-acts .btn{flex:1;justify-content:center}}