/* ========================================================= 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} /* ===== MENTIONS LEGALES ===== Une page qu'on lit rarement mais qui doit rester lisible : colonne etroite, definitions alignees, aucun effet. */ .legal{padding-bottom:clamp(2.5rem,5vw,4rem)} .legal .ahead{max-width:820px;margin:1.4rem auto clamp(1.6rem,3vw,2.2rem); background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l); padding:clamp(1.5rem,3vw,2.2rem)} .legal .ahead .meta{border-top:0;padding-top:0} .legal .ahead .meta span{font-size:.82rem;color:var(--muted);line-height:1.6} .legal-corps{max-width:820px;margin:0 auto} .legal-corps section{padding-top:1.8rem} .legal-corps h2{font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--accent);margin-bottom:.9rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)} .legal-corps p{color:var(--ink-2);line-height:1.85;margin-bottom:1rem;font-size:.95rem} .legal-corps p:last-child{margin-bottom:0} .legal-corps a{color:var(--primary);text-decoration:underline;text-underline-offset:3px} .legal-corps a:hover{color:var(--accent)} .legal-liste{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.6rem;font-size:.93rem} .legal-liste dt{font-family:var(--titre);font-weight:600;color:var(--ink);white-space:nowrap} .legal-liste dd{margin:0;color:var(--ink-2);overflow-wrap:anywhere} @media(max-width:620px){ .legal-liste{grid-template-columns:1fr;gap:.1rem} .legal-liste dt{margin-top:.8rem} } .legal-maj{max-width:820px;margin:2.4rem auto 0;font-size:.82rem;color:var(--muted); padding-top:1.2rem;border-top:1px solid var(--line)} /* tableaux des traitements et des cookies : ils doivent pouvoir defiler seuls sur telephone plutot que faire deborder la page */ .legal-tab{overflow-x:auto;margin:0 0 1rem} .legal-tab table{width:100%;border-collapse:collapse;font-size:.87rem;min-width:520px} .legal-tab th{text-align:left;font-family:var(--titre);font-size:.68rem;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:.6rem .8rem; background:var(--surface);border-bottom:1px solid var(--line)} .legal-tab td{padding:.75rem .8rem;border-bottom:1px solid var(--line);color:var(--ink-2); vertical-align:top;line-height:1.6} .legal-tab tr:last-child td{border-bottom:0} .legal-tab td:first-child{font-family:var(--titre);font-weight:600;color:var(--ink)} .legal-puces{margin:0 0 1rem;padding-left:1.15rem;color:var(--ink-2);font-size:.95rem;line-height:1.8} .legal-puces li{margin-bottom:.6rem} .legal-puces b{color:var(--ink)} .legal-note{font-size:.85rem!important;color:var(--muted)!important} /* ===== CONTENU VENU DE L'EDITEUR WORDPRESS ===== Les CGV et pages analogues gardent leur texte, on ne change que sa presentation pour les sortir de l'ancien theme. */ .texte-wp h2{font-size:clamp(1.2rem,2.4vw,1.55rem);margin:2.2rem 0 .8rem;color:var(--ink); letter-spacing:-.02em;text-transform:none;border:0;padding:0} .texte-wp h3{font-family:var(--titre);font-size:1.05rem;font-weight:700;margin:1.6rem 0 .6rem;color:var(--ink)} .texte-wp h4{font-family:var(--titre);font-size:.95rem;font-weight:600;margin:1.3rem 0 .5rem;color:var(--ink)} .texte-wp ul,.texte-wp ol{margin:0 0 1.2rem;padding-left:1.3rem;color:var(--ink-2);line-height:1.85} .texte-wp li{margin-bottom:.5rem} .texte-wp li::marker{color:var(--accent)} .texte-wp strong,.texte-wp b{color:var(--ink);font-weight:600} .texte-wp table{width:100%;border-collapse:collapse;margin:0 0 1.3rem;font-size:.9rem} .texte-wp th,.texte-wp td{padding:.7rem .8rem;border-bottom:1px solid var(--line);text-align:left} .texte-wp img{max-width:100%;height:auto;border-radius:var(--r)} .texte-wp blockquote{margin:1.4rem 0;padding:1rem 1.2rem;background:var(--surface); border-left:3px solid var(--accent);border-radius:0 var(--r) var(--r) 0} /* ===== HAUTEUR DE L'EN-TETE ===== Chaque page du site embarque sa propre feuille : il n'existe pas de socle commun ou declarer cette variable une seule fois. Les fiches la declarent deja pour leur sommaire collant ; sans ces lignes, elle serait vide ici, le calc() de `top` invalide, et le sommaire ne collerait pas du tout. Valeurs identiques a celles des fiches : si l'en-tete change de hauteur, les deux endroits doivent etre repris. */ :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}} /* ===== DOCUMENT LONG : SOMMAIRE LATERAL ===== Des CGV se lisent rarement en entier : on vient y chercher un point precis, le plus souvent la retractation ou la livraison. Le sommaire colle en haut d'ecran sur grand ecran, et repasse en simple liste au-dessus du texte sur mobile, ou une colonne collante mangerait la moitie de la hauteur utile. */ .legal-somm .legal-grille{display:grid;gap:2.4rem} /* Sans sommaire, le bloc titre est centre sur la colonne de lecture. Avec un sommaire, cette colonne se decale vers la droite et le titre se retrouvait suspendu au-dessus de rien. Il reprend alors toute la largeur, et son bord gauche retombe sur celui du sommaire. */ .legal-somm .ahead{max-width:none;margin-left:0;margin-right:0} .legal-nav{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:1.1rem 1.2rem} .legal-nav b{display:block;font-family:var(--titre);font-size:.78rem;letter-spacing:.08em; text-transform:uppercase;color:var(--ink-3);margin-bottom:.7rem} .legal-nav ol{margin:0;padding-left:1.15rem;font-size:.9rem;line-height:1.5} .legal-nav li{margin-bottom:.45rem} .legal-nav li::marker{color:var(--ink-3);font-size:.8rem} .legal-nav a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent} .legal-nav a:hover{color:var(--accent);border-bottom-color:currentColor} @media(min-width:900px){ .legal-somm .legal-grille{grid-template-columns:15rem 1fr;align-items:start} .legal-nav{position:sticky;top:calc(var(--hdr-h) + 1.2rem); max-height:calc(100vh - var(--hdr-h) - 2.4rem);overflow-y:auto} } /* Un titre vise par une ancre doit s'arreter sous l'en-tete collant. */ .texte-wp h2{scroll-margin-top:calc(var(--hdr-h) + 1rem)} /* Le premier titre suit immediatement le sommaire sur mobile : pas de marge haute superflue. */ .texte-wp > h2:first-child{margin-top:0} /* ===== ZONE RESTANT A COMPLETER ===== Volontairement voyante. Un blanc discret dans des CGV est un blanc qui part en production, et c'est exactement le genre d'oubli qui se paie. */ .acompleter{display:block;margin:1.2rem 0;padding:.85rem 1rem;border-radius:var(--r); background:#fff7ed;border:1px dashed #f59e0b;color:#7c2d12;font-size:.9rem;line-height:1.6} .acompleter::before{content:"A completer avant l'ouverture de la boutique";display:block; font-family:var(--titre);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase; color:#b45309;margin-bottom:.3rem} /* ===== FORMULAIRE DE RETRACTATION ===== Le modele officiel doit pouvoir etre recopie tel quel par le client. */ .formulaire-retractation{margin:1.4rem 0;padding:1.2rem 1.3rem;background:var(--surface); border:1px solid var(--line);border-radius:var(--r);font-size:.9rem;line-height:1.8} .formulaire-retractation p{margin:0 0 .6rem} .formulaire-retractation p:last-child{margin-bottom:0}