/* ========================================================================= Cabinet Lecaplain — feuille de style principale Palette crème et gris, titres Amiri, texte Poppins. Le socle (variables, en-tête, accueil) est inliné dans le . 1. Sections 2. Textes et citations 3. Photos et plan 4. Domaines d'intervention 5. Honoraires 6. Joindre le cabinet 7. Formulaire 8. Pied de page 9. Pages intérieures et journal 10. Apparitions, préférences, impression ========================================================================= */ /* 1. Sections ------------------------------------------------------------ */ .section{padding:clamp(64px,8vw,110px) 0} .section--creme2{background:var(--creme-2)} /* Titre de section : filet court au-dessus, titre aligné à gauche — comme le modèle */ .section__titre{font-size:clamp(24px,3.2vw,34px);margin-bottom:clamp(26px,3vw,38px);letter-spacing:.02em;text-transform:uppercase} .section__titre::before{content:"";display:block;width:56px;height:3px;background:var(--gris);margin-bottom:20px} .section__titre--centre{text-align:center} .section__titre--centre::before{margin-inline:auto} .duo{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,4.5vw,64px);align-items:start} .duo--honoraires{grid-template-columns:1.25fr .75fr} .duo--contact{grid-template-columns:1fr 1.1fr;align-items:start;gap:clamp(30px,5vw,70px)} .colonne-etroite{max-width:72ch;margin-inline:auto;text-align:center} /* 2. Textes -------------------------------------------------------------- */ h3{font-size:clamp(20px,2.3vw,27px);margin-bottom:16px} p{font-size:15.5px;line-height:1.85;color:var(--texte)} .pile p,.chapo,.activite__intro,.depliants p,.texte p{text-align:justify;hyphens:manual} .pile>*+*{margin-top:16px} .apres{margin-top:clamp(26px,3vw,38px)} .chapo{margin-bottom:14px} .citation{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.2vw,25px);line-height:1.5; color:var(--gris);margin-bottom:26px} .citation--grande{font-size:clamp(21px,2.6vw,30px);margin-bottom:32px} /* 3. Photos et plan ------------------------------------------------------ */ .photo{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--creme-2)} .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .photo--nature img{filter:none} /* Cadre aux proportions exactes du portrait (2677 × 3567) : aucun recadrage */ .photo--portrait{aspect-ratio:2677/3567} .photo__mention{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center; padding:24px;background:var(--creme-2);color:var(--gris-2);font-size:11px;letter-spacing:.16em; text-transform:uppercase;line-height:1.8} .photo picture+.photo__mention,.photo img+.photo__mention{display:none} .plan img{width:100%;height:auto} .plan figcaption{padding-top:10px;font-size:12.5px;color:var(--gris-2)} .plan figcaption a{border-bottom:1px solid var(--filet)} .plan figcaption a:hover{border-color:var(--gris)} /* 4. Domaines d'intervention --------------------------------------------- */ .activites{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(30px,4vw,54px);align-items:start} .activite h3{color:var(--gris);text-transform:uppercase;font-size:clamp(17px,1.9vw,20px);letter-spacing:.02em} .activite__intro{font-size:15px;margin-bottom:14px} .prestations{list-style:none;display:grid;gap:12px} .prestations li{position:relative;padding-left:18px;font-size:15px;line-height:1.65;color:var(--texte)} .prestations li::before{content:"–";position:absolute;left:0;top:0;color:var(--gris-2)} /* 5. Honoraires ---------------------------------------------------------- */ .modes{list-style:none;display:grid;gap:16px;margin:22px 0 0} .modes li{position:relative;padding-left:18px;font-size:15px;line-height:1.75;text-align:justify} .modes li::before{content:"–";position:absolute;left:0;top:0;color:var(--gris-2)} .modes strong{font-weight:500;color:var(--gris)} /* dépliants — conservés pour un usage éventuel ------------------------- */ .depliants{margin-top:24px;border:1px solid var(--filet);background:var(--blanc)} .depliants details+details{border-top:1px solid var(--filet)} .depliants summary{list-style:none;cursor:pointer;padding:15px 18px;font-size:13px;letter-spacing:.06em; text-transform:uppercase;color:var(--gris);display:flex;align-items:center;gap:12px} .depliants summary::-webkit-details-marker{display:none} .depliants summary::before{content:"";width:8px;height:8px;border-right:1.4px solid var(--gris-2); border-bottom:1.4px solid var(--gris-2);transform:rotate(45deg);transition:transform .2s;flex:0 0 auto} .depliants details[open] summary::before{transform:rotate(-135deg)} .depliants summary:hover{background:var(--creme)} .depliants p{padding:0 18px 18px 38px;font-size:14.5px;line-height:1.75} /* 6. Joindre le cabinet -------------------------------------------------- */ .joindre__titre{margin-top:clamp(32px,3.6vw,44px)} .joindre{list-style:none;display:grid;gap:24px;margin-top:30px} .joindre li{display:flex;align-items:flex-start;gap:14px;font-size:15.5px;line-height:1.6;font-weight:500} .joindre__icone{flex:0 0 auto;width:20px;height:20px;margin-top:2px;color:var(--gris-2)} .joindre__icone svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round} .joindre a{border-bottom:1px solid var(--filet);transition:border-color .2s} .joindre a:hover{border-color:var(--gris)} .chiffres{font-variant-numeric:tabular-nums} /* 7. Formulaire ---------------------------------------------------------- */ .formulaire{margin-top:clamp(46px,5.5vw,74px);max-width:820px} .formulaire__grille{display:grid;grid-template-columns:1fr 1fr;gap:20px 26px;margin-bottom:20px} .field{display:grid;gap:6px;margin-bottom:20px} .field label{font-size:13px;letter-spacing:.01em;color:var(--gris);font-weight:400} .field .facultatif{letter-spacing:0;text-transform:none} .field input,.field select,.field textarea{width:100%;padding:13px 14px;border:1px solid transparent;border-radius:0; background:#efe5d5;font-family:var(--sans);font-size:16px;font-weight:300;color:var(--texte);transition:border-color .2s,background .2s} .field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%233a3a3a' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px} .field textarea{min-height:150px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gris);background:#f6efe3} .field--invalid input,.field--invalid select,.field--invalid textarea{border-color:#9b2c2c} .field__error{font-size:13px;color:#9b2c2c} .field__error:empty{display:none} .consent{display:flex;gap:12px;align-items:flex-start} .consent input{width:24px;height:24px;flex:0 0 auto;accent-color:var(--gris)} .consent label{font-size:14px;letter-spacing:0;text-transform:none;color:var(--texte);line-height:1.6} .honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .formulaire button{border:0;cursor:pointer;font-family:var(--sans)} .formulaire button:active:not(:disabled){transform:translateY(1px)} .formulaire button:disabled{opacity:.55;cursor:progress} .form__status{margin-top:18px;font-size:14.5px;padding:12px 16px;background:var(--blanc);border-left:2px solid var(--gris)} .form__status:empty{display:none} .form__status[data-state="error"]{border-color:#9b2c2c;color:#7d2323} .form__legal{margin-top:16px;font-size:12.5px;line-height:1.7;color:var(--gris-2)} .form__legal a{border-bottom:1px solid var(--filet)} /* 8. Pied de page -------------------------------------------------------- */ .pied{background:var(--gris);color:rgba(255,255,255,.78);padding:clamp(44px,5vw,60px) 0 24px;font-size:14px} .pied__haut{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid var(--filet-clair)} .pied .marque{margin-bottom:14px} .pied__adresse{color:rgba(255,255,255,.78);font-size:14px;line-height:1.8} .pied__adresse a{border-bottom:1px solid rgba(255,255,255,.3)} .pied__liens{display:flex;gap:24px;flex-wrap:wrap;list-style:none;font-size:13.5px} .pied__liens a{display:inline-block;padding:4px 0;border-bottom:1px solid transparent;transition:border-color .2s} .pied__liens a:hover{border-bottom-color:var(--beige)} .pied__bas{padding-top:20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.66)} .pied__bas a{border-bottom:1px solid rgba(255,255,255,.3)} /* 9. Pages intérieures et journal ---------------------------------------- */ .tete-page{background:var(--gris);color:var(--blanc);padding:calc(var(--nav) + 66px) 0 56px;text-align:center} .tete-page h1{font-size:clamp(26px,3.6vw,40px);color:var(--blanc);text-transform:uppercase;letter-spacing:.02em} .tete-page .etiquette{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.66);margin-bottom:14px} .texte{max-width:74ch;margin-inline:auto;padding:clamp(44px,5.5vw,72px) 0} .texte h2{font-size:clamp(21px,2.5vw,27px);margin:40px 0 12px} .texte h3{font-size:18px;margin:24px 0 8px} .texte ul,.texte ol{margin:12px 0 12px 20px} .texte li{margin:6px 0;color:var(--texte)} .texte a{border-bottom:1px solid var(--filet);padding-block:2px} .texte a:hover{border-color:var(--gris)} .texte>h2:first-child{margin-top:0} .acompleter{background:rgba(86,91,98,.14);border-bottom:1px dashed var(--gris-2);padding:1px 6px} .journal{list-style:none;max-width:74ch;margin-inline:auto;padding:clamp(44px,5.5vw,72px) 0;display:grid;gap:clamp(34px,4vw,52px)} .journal__item h2{font-size:clamp(21px,2.5vw,28px);margin:6px 0 10px} .journal__item h2 a:hover{border-bottom:1px solid var(--gris)} .journal__meta{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-2)} .journal__lien{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--gris)} /* 10. Apparitions et préférences ----------------------------------------- */ .reveal{opacity:0;transform:translateY(12px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)} .reveal.is-in{opacity:1;transform:none} .photo-toggle{position:fixed;right:18px;bottom:18px;z-index:99;background:var(--gris);color:#fff;border:1px solid rgba(255,255,255,.25); padding:10px 18px;font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer} .photo-toggle:hover{background:#565b62;color:var(--blanc)} body.no-photo .photo picture,body.no-photo .photo img,body.no-photo .accueil__fond picture{display:none} body.no-photo .photo picture+.photo__mention,body.no-photo .photo img+.photo__mention{display:flex} /* Points de rupture ------------------------------------------------------ */ @media(max-width:900px){ .duo,.duo--honoraires,.duo--contact,.duo--activites{grid-template-columns:1fr} .formulaire__grille{grid-template-columns:1fr;gap:0} .duo .photo{width:100%;max-width:460px;margin-inline:auto} } @media(max-width:560px){ .section__titre{font-size:22px} .joindre li{font-size:15px} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} .reveal{opacity:1;transform:none} } @media print{ .entete,.accueil__fond,.photo,.plan,.formulaire,.photo-toggle,.evitement{display:none!important} body{background:#fff;color:#000;font-size:12pt} .section{padding:16pt 0} .pied{background:#fff;color:#000} }