/* ========================================================= Template « Lily » — site vitrine sophrologue Feuille de style unique. Palette et typographie ci-dessous. ========================================================= */ /* ---------- 1. Jetons ---------- */ /* Trois palettes livrees. On bascule avec l'attribut data-palette sur : (defaut) version chaude, argile dominante version sobre, bleu-gris Seules les cinq valeurs de base changent d'une palette a l'autre ; tout le reste de la feuille est derive et suit automatiquement. */ :root, [data-palette="sauge"]{ --paper:#F6F5F1; --paper-rgb:246 245 241; --ink-rgb:34 41 31; /* #22291F */ --accent-rgb:75 93 69; /* #4B5D45 sauge */ --accent-2-rgb:166 120 76; /* #A6784C argile */ --rule:#D9D4C7; } [data-palette="argile"]{ --paper:#F7F3EC; --paper-rgb:247 243 236; --ink-rgb:42 34 29; /* #2A221D */ --accent-rgb:143 78 51; /* #8F4E33 terre cuite */ --accent-2-rgb:107 122 90; /* #6B7A5A sauge sourde */ --rule:#E3D9C9; } [data-palette="ardoise"]{ --paper:#F3F4F4; --paper-rgb:243 244 244; --ink-rgb:30 36 39; /* #1E2427 */ --accent-rgb:70 86 95; /* #46565F ardoise */ --accent-2-rgb:140 122 102; /* #8C7A66 sable */ --rule:#DBDEDF; } :root{ /* couleurs derivees — ne pas modifier palette par palette */ --ink:rgb(var(--ink-rgb)); --accent:rgb(var(--accent-rgb)); --accent-2:rgb(var(--accent-2-rgb)); --ink-70:rgb(var(--ink-rgb) / .72); --ink-55:rgb(var(--ink-rgb) / .66); --accent-wash:rgb(var(--accent-rgb) / .05); --accent-line:rgb(var(--accent-rgb) / .28); --on-accent:var(--paper); --on-accent-70:rgb(var(--paper-rgb) / .88); --on-accent-line:rgb(var(--paper-rgb) / .30); --serif:"Fraunces",Georgia,"Times New Roman",serif; --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --gut:clamp(1.5rem,3.2vw,2.75rem); --pad:clamp(1.25rem,5vw,4.5rem); --sec:clamp(4rem,9vw,7.5rem); --max:1280px; } /* ---------- 2. Base ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:1.0625rem; line-height:1.75; font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg{display:block;max-width:100%} h1,h2,h3,h4{ font-family:var(--serif); font-weight:400; font-variation-settings:"opsz" 96; line-height:1.08; letter-spacing:-.018em; margin:0; text-wrap:balance; } p{margin:0 0 1.15em} p:last-child{margin-bottom:0} a{color:inherit} ::selection{background:var(--accent);color:var(--paper)} .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)} .skip-link{ position:absolute;left:-9999px;top:0;z-index:99; background:var(--ink);color:var(--paper);padding:.75rem 1.25rem; } .skip-link:focus{left:0} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* ---------- 3. Typographie éditoriale ---------- */ .t-display{font-size:clamp(2.85rem,7.2vw,5.1rem);line-height:1.01;letter-spacing:-.028em} .t-h1{font-size:clamp(2.4rem,5.4vw,3.9rem);line-height:1.05;letter-spacing:-.024em} .t-h2{font-size:clamp(1.85rem,3.6vw,2.8rem);line-height:1.1} .t-h3{font-size:clamp(1.25rem,1.9vw,1.5rem);line-height:1.25;letter-spacing:-.01em} .t-lead{font-size:clamp(1.125rem,1.5vw,1.3rem);line-height:1.65;color:var(--ink-70);max-width:34ch} .t-body{color:var(--ink-70);max-width:62ch} .t-body p+p{margin-top:0} .t-small{font-size:.9375rem;line-height:1.6;color:var(--ink-55)} em,.t-italic{font-style:italic} .ital{font-family:var(--serif);font-style:italic;font-variation-settings:"opsz" 40} /* Intitulé de section : casse normale, filet court en amorce. */ .label{ font-family:var(--sans); font-size:.8125rem; letter-spacing:.055em; color:var(--accent); margin:0 0 1.5rem; display:flex;align-items:center;gap:.75rem; font-weight:500; } .label::before{content:"";width:2rem;height:1px;background:var(--accent-line);flex:none} /* ---------- 4. Liens & boutons ---------- */ .btn{ display:inline-block; font-family:var(--sans);font-size:.9375rem;font-weight:500;letter-spacing:.01em; padding:1rem 1.9rem; background:var(--accent);color:var(--paper); text-decoration:none;border:1px solid var(--accent); transition:background .25s ease,border-color .25s ease,color .25s ease; } .btn:hover{background:var(--ink);border-color:var(--ink)} .btn-ghost{background:transparent;color:var(--accent)} .btn-ghost:hover{background:var(--accent);color:var(--paper);border-color:var(--accent)} .btn-sm{padding:.7rem 1.25rem;font-size:.875rem} .link{ text-decoration:none; color:var(--ink); border-bottom:1px solid var(--accent-line); padding-bottom:.18em; transition:border-color .25s ease,color .25s ease; font-weight:500; } .link:hover{color:var(--accent);border-color:var(--accent)} .link-clay:hover{color:var(--accent-2);border-color:var(--accent-2)} /* ---------- 5. En-tête ---------- */ .site-header{ border-bottom:1px solid var(--rule); background:var(--paper); position:sticky;top:0;z-index:40; } .header-inner{ display:flex;align-items:center;justify-content:space-between; gap:2rem;min-height:5.25rem; } .brand{text-decoration:none;display:block;line-height:1.2} .brand-name{ display:block;font-family:var(--serif);font-size:1.375rem; letter-spacing:-.02em;font-variation-settings:"opsz" 40; } .brand-role{display:block;font-size:.8125rem;color:var(--ink-55);letter-spacing:.03em;margin-top:.15rem} .site-nav{display:flex;align-items:center;gap:2.25rem} .site-nav ul{display:flex;gap:1.9rem;list-style:none;margin:0;padding:0} .site-nav a:not(.btn){ text-decoration:none;font-size:.9375rem;color:var(--ink-70); padding-bottom:.3rem;border-bottom:1px solid transparent; transition:color .2s ease,border-color .2s ease; } .site-nav a:not(.btn):hover{color:var(--ink);border-color:var(--rule)} .site-nav a[aria-current="page"]{color:var(--accent);border-color:var(--accent)} .nav-toggle{display:none} /* ---------- 6. Sections & filets ---------- */ .section{padding-block:var(--sec);border-top:1px solid var(--rule)} .section--flush{border-top:0} .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut)} .rule{height:1px;background:var(--rule);border:0;margin:0} /* ---------- 7. Accueil : hero ---------- */ .hero{padding-block:clamp(3.5rem,7vw,6.5rem) clamp(3.5rem,8vw,7rem);overflow:hidden} .hero-grid{align-items:end} .hero-text{grid-column:1 / span 7} .hero-media{grid-column:9 / span 4;position:relative} .hero h1{margin-bottom:1.75rem} .hero h1 .ital{color:var(--accent)} .hero-actions{display:flex;align-items:center;gap:1.75rem;flex-wrap:wrap;margin-top:2.5rem} .hero-meta{ margin-top:3.25rem;padding-top:1.5rem;border-top:1px solid var(--rule); display:flex;gap:2.5rem;flex-wrap:wrap;font-size:.9375rem;color:var(--ink-55); } .hero-meta b{font-weight:500;color:var(--ink)} .portrait{position:relative} .portrait img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover} .portrait figcaption{ margin-top:.9rem;font-size:.8125rem;color:var(--ink-55); padding-left:1rem;border-left:1px solid var(--rule);line-height:1.5; } .hero{position:relative} /* ---------- 8. Blocs éditoriaux ---------- */ .split{align-items:start} .split-aside{grid-column:1 / span 4} .split-main{grid-column:6 / span 7} .split-main--narrow{grid-column:6 / span 6} .statement{grid-column:1 / span 7} .statement + .statement-note{grid-column:9 / span 4;padding-top:.5rem} /* Liste de prestations : filets, pas de cartes. */ .offer-list{list-style:none;margin:0;padding:0} .offer{ display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut); padding-block:clamp(1.75rem,3vw,2.5rem); border-top:1px solid var(--rule); } .offer:last-child{border-bottom:1px solid var(--rule)} .offer-head{grid-column:1 / span 4} .offer-body{grid-column:5 / span 6} .offer-price{grid-column:11 / span 2;text-align:right} .offer h3{margin-bottom:.4rem} .offer-dur{font-size:.875rem;color:var(--ink-55);letter-spacing:.02em} .price{ font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2rem); font-variation-settings:"opsz" 40;letter-spacing:-.02em;color:var(--accent-2); display:block;line-height:1.1; } .price-note{display:block;font-family:var(--sans);font-size:.8125rem;color:var(--ink-55);margin-top:.35rem} /* Aperçu compact (accueil) */ .mini-list{list-style:none;margin:0;padding:0} .mini-list li{ display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem; padding-block:1.15rem;border-top:1px solid var(--rule); } .mini-list li:last-child{border-bottom:1px solid var(--rule)} .mini-list .m-name{font-family:var(--serif);font-size:1.1875rem;font-variation-settings:"opsz" 40} .mini-list .m-price{font-size:.9375rem;color:var(--ink-55);white-space:nowrap} /* ---------- 9. Témoignage ---------- */ .quote{grid-column:2 / span 8;margin:0} .quote blockquote{ margin:0;font-family:var(--serif);font-style:italic; font-size:clamp(1.45rem,2.9vw,2.15rem);line-height:1.34;letter-spacing:-.012em; font-variation-settings:"opsz" 60;text-wrap:pretty; } .quote figcaption{ margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--rule); font-size:.9375rem;color:var(--ink-55);max-width:26rem; } .quote-mark{ display:block;font-family:var(--serif);font-size:3.5rem;line-height:.6; color:var(--accent-2);margin-bottom:1.25rem; } /* ---------- 10. Étapes (sans numérotation) ---------- */ .steps{list-style:none;margin:0;padding:0} .steps li{ display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:var(--gut);padding-block:1.9rem;border-top:1px solid var(--rule); } .steps li:last-child{border-bottom:1px solid var(--rule)} .steps h3{color:var(--accent)} /* ---------- 11. Parcours (seule séquence numérotée : les dates) ---------- */ .timeline{list-style:none;margin:0;padding:0;position:relative} .timeline::before{ content:"";position:absolute;top:.85rem;bottom:2.5rem;left:9.5rem; width:1px;background:var(--rule); } .timeline li{ display:grid;grid-template-columns:8rem 1fr;gap:3rem; padding-block:0 2.75rem;position:relative; } .timeline li:last-child{padding-bottom:0} .tl-date{ font-family:var(--serif);font-size:1.5rem;font-variation-settings:"opsz" 30; color:var(--accent-2);text-align:right;letter-spacing:-.01em;line-height:1.5; } .tl-body{position:relative;padding-left:1.75rem} .tl-body::before{ content:"";position:absolute;left:-.3rem;top:.72rem;width:.5rem;height:.5rem; background:var(--paper);border:1px solid var(--accent);border-radius:50%; } .timeline li:first-child .tl-body::before{background:var(--accent)} .tl-body h3{margin-bottom:.45rem} /* ---------- 12. Contact ---------- */ .info-list{list-style:none;margin:0;padding:0} .info-list li{ display:grid;grid-template-columns:7.5rem 1fr;gap:1.5rem; padding-block:1.1rem;border-top:1px solid var(--rule);align-items:baseline; } .info-list li:last-child{border-bottom:1px solid var(--rule)} .info-list dt,.info-k{font-size:.875rem;color:var(--ink-55);letter-spacing:.02em} .info-list a{text-decoration:none;border-bottom:1px solid var(--accent-line);padding-bottom:.1em;overflow-wrap:anywhere} .site-footer a{overflow-wrap:anywhere} .info-list a:hover{color:var(--accent);border-color:var(--accent)} .form{margin-top:.5rem} .field{margin-bottom:2rem} .field label{display:block;font-size:.875rem;color:var(--ink-55);margin-bottom:.5rem;letter-spacing:.02em} .field input,.field textarea,.field select{ width:100%;font:inherit;font-size:1rem;color:var(--ink); background:transparent;border:0;border-bottom:1px solid var(--rule); padding:.55rem 0;border-radius:0; transition:border-color .25s ease; } .field textarea{resize:vertical;min-height:7rem;line-height:1.6} .field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--accent)} .form-note{font-size:.8125rem;color:var(--ink-55);margin-top:1.5rem;max-width:44ch} /* ---------- 13. Bande d'appel ---------- */ .callout{position:relative;overflow:hidden;border-top:0;color:var(--on-accent);background:var(--ink)} .callout .wrap{position:relative;z-index:2;padding-block:clamp(4.5rem,9vw,7.5rem)} .callout-photo{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover} .callout::after{ content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(102deg, rgb(var(--ink-rgb) / .88) 0%, rgb(var(--ink-rgb) / .80) 48%, rgb(var(--ink-rgb) / .42) 100%); } .callout .t-body,.callout .t-lead{color:var(--on-accent-70)} .callout .btn{background:var(--paper);border-color:var(--paper);color:var(--ink)} .callout .btn:hover{background:transparent;color:var(--paper);border-color:var(--paper)} .callout-inner{grid-column:1 / span 7} /* ---------- 14. Page d'en-tête (pages intérieures) ---------- */ .page-head{padding-block:clamp(3.25rem,6vw,5.5rem) clamp(2.5rem,5vw,4rem)} .page-head h1{grid-column:1 / span 7} .page-head .t-lead{grid-column:9 / span 4;align-self:end;max-width:none} /* ---------- 15. Texte long (mentions légales) ---------- */ .prose{grid-column:3 / span 8} .prose h2{font-size:1.375rem;margin:3rem 0 .9rem;letter-spacing:-.012em} .prose h2:first-child{margin-top:0} .prose p,.prose li{color:var(--ink-70)} .prose ul{padding-left:1.1rem;margin:0 0 1.15em} .prose li{margin-bottom:.35rem} .prose a{color:var(--accent)} /* ---------- 16. Pied de page ---------- */ .site-footer{border-top:1px solid var(--rule);padding-top:clamp(3rem,6vw,4.5rem)} .footer-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);padding-bottom:3.5rem} .footer-brand{grid-column:1 / span 4} .footer-col{grid-column:span 2} .footer-col:nth-of-type(2){grid-column:6 / span 2} .footer-col:nth-of-type(3){grid-column:8 / span 2} .footer-col:nth-of-type(4){grid-column:10 / span 3} .f-name{font-family:var(--serif);font-size:1.25rem;font-variation-settings:"opsz" 40;margin-bottom:.25rem} .footer-h{font-family:var(--sans);font-size:.8125rem;font-weight:500;letter-spacing:.045em;color:var(--accent);margin:0 0 .9rem} .site-footer p{font-size:.9375rem;color:var(--ink-70);margin-bottom:.5rem} .site-footer a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s ease} .site-footer a:hover{border-color:var(--rule)} .footer-bottom{ border-top:1px solid var(--rule);padding-block:1.5rem 2.25rem; display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap; } .footer-bottom p{font-size:.8125rem;color:var(--ink-55);margin:0} /* ---------- 17. Responsive ---------- */ @media (max-width:1080px){ .hero-text{grid-column:1 / span 7} .hero-media{grid-column:9 / span 4} .split-aside{grid-column:1 / span 4} .split-main{grid-column:6 / span 7} .offer-head{grid-column:1 / span 4} .offer-body{grid-column:5 / span 5} .offer-price{grid-column:10 / span 3} .quote{grid-column:1 / span 10} .prose{grid-column:2 / span 9} } @media (max-width:860px){ .nav-toggle{ display:inline-flex;align-items:center;gap:.55rem; background:transparent;border:0;padding:.5rem 0;cursor:pointer; font:inherit;font-size:.9375rem;color:var(--ink); } .nav-toggle .bars{display:block;width:1.25rem;height:9px;position:relative} .nav-toggle .bars::before,.nav-toggle .bars::after{ content:"";position:absolute;left:0;right:0;height:1px;background:var(--ink); transition:transform .28s ease,top .28s ease; } .nav-toggle .bars::before{top:0} .nav-toggle .bars::after{top:8px} .nav-toggle[aria-expanded="true"] .bars::before{top:4px;transform:rotate(45deg)} .nav-toggle[aria-expanded="true"] .bars::after{top:4px;transform:rotate(-45deg)} .site-nav{ display:none;position:absolute;top:100%;left:0;right:0; background:var(--paper);border-bottom:1px solid var(--rule); flex-direction:column;align-items:stretch;gap:0; padding:.5rem var(--pad) 2rem; } .site-nav.is-open{display:flex} .site-nav ul{flex-direction:column;gap:0} .site-nav li{border-bottom:1px solid var(--rule)} .site-nav a:not(.btn){display:block;padding:1rem 0;font-size:1.0625rem;border:0} .site-nav a[aria-current="page"]{border:0} .nav-cta{margin-top:1.75rem;text-align:center} .grid,.offer,.footer-grid{grid-template-columns:repeat(6,minmax(0,1fr))} .hero-text,.hero-media,.split-aside,.split-main,.split-main--narrow, .statement,.statement-note,.statement + .statement-note,.quote,.callout-inner,.prose, .page-head h1,.page-head .t-lead, .offer-head,.offer-body,.offer-price, .footer-brand,.footer-col, .footer-col:nth-of-type(2),.footer-col:nth-of-type(3),.footer-col:nth-of-type(4){grid-column:1 / -1} .hero-grid{gap:clamp(2.5rem,6vw,3.5rem)} .hero-media{order:-1;max-width:22rem} .breath--hero{right:-6rem;top:-5rem;width:17rem;opacity:.75} .breath-rule{padding-top:2rem} .breath--band{right:-10rem;bottom:-11rem;width:26rem} .shot,.shot-note{grid-column:1 / -1} .shot-note{align-self:start;padding-bottom:0} .callout::after{background:linear-gradient(180deg, rgb(var(--ink-rgb) / .88) 0%, rgb(var(--ink-rgb) / .84) 60%, rgb(var(--ink-rgb) / .70) 100%)} .offer{gap:.75rem} .offer-price{text-align:left;margin-top:.5rem} .price{display:inline-block} .price-note{display:inline;margin-left:.6rem} .steps li{grid-template-columns:1fr;gap:.65rem} .timeline::before{left:.25rem} .timeline li{grid-template-columns:1fr;gap:.35rem;padding-left:1.75rem} .tl-date{text-align:left} .tl-body{padding-left:0} .tl-body::before{left:-1.75rem;top:.6rem} .info-list li{grid-template-columns:1fr;gap:.15rem} .footer-grid{gap:2.5rem} } @media (max-width:520px){ .hero-meta{gap:1.25rem;flex-direction:column} .hero-actions{gap:1.25rem} .btn{width:100%;text-align:center} .hero-actions .link{width:auto} } /* ---------- 18. Mouvement : une seule fois, à l'arrivée sur l'accueil ---------- */ /* La classe .is-intro n'est posée que par le script en-tête de index.html, et uniquement si l'utilisateur ne demande pas de mouvement réduit. */ .is-intro .hero-text > *{opacity:0;animation:lily-rise .95s cubic-bezier(.22,.68,.24,1) forwards} .is-intro .hero-text > :nth-child(1){animation-delay:.05s} .is-intro .hero-text > :nth-child(2){animation-delay:.16s} .is-intro .hero-text > :nth-child(3){animation-delay:.27s} .is-intro .hero-text > :nth-child(4){animation-delay:.38s} .is-intro .hero-text > :nth-child(5){animation-delay:.49s} .is-intro .portrait img{ clip-path:inset(0 0 100% 0); animation:lily-wipe 1.15s cubic-bezier(.32,.72,.2,1) .18s forwards; } .is-intro .portrait figcaption{opacity:0;animation:lily-rise .8s ease .95s forwards} .is-intro .breath--hero{opacity:0;animation:lily-arcs 1.6s ease .5s forwards} @keyframes lily-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @keyframes lily-wipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}} @keyframes lily-arcs{from{opacity:0;transform:translate(18px,18px)}to{opacity:.85;transform:none}} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} /* Filet de sécurité : si le réglage change après le chargement, le contenu du hero reste visible malgré l'animation neutralisée. */ .is-intro .hero-text > *, .is-intro .portrait figcaption{opacity:1} .is-intro .portrait img{clip-path:none} .is-intro .breath--hero{opacity:.85} } /* ---------- 21. Motif de respiration ---------- */ /* Arcs concentriques : la signature graphique du template. Present a deux endroits seulement — le bas du hero et la bande temoignage — pour qu'il porte l'identite au lieu de se diluer en filigrane sur chaque section. */ .breath{position:absolute;display:block;pointer-events:none;color:var(--accent)} .breath path{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke} .breath .b-2{stroke:var(--accent-2)} .breath--hero{ right:-5rem;top:-7rem; width:clamp(19rem,33vw,31rem);aspect-ratio:1; opacity:.9;z-index:0; } /* Separateur en ondes : le motif a pleine echelle, entre deux sections. */ .breath-rule{ position:relative;border-top:1px solid var(--rule); padding-top:clamp(2.5rem,5vw,4rem); overflow:hidden;line-height:0; } .breath-rule svg{display:block;width:100%;height:auto;color:var(--accent)} .breath-rule circle{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke} .breath-rule .b-2{stroke:var(--accent-2)} .hero-grid{position:relative;z-index:1} .hero{overflow:hidden} .breath--band{ right:-14rem;bottom:-16rem; width:clamp(26rem,52vw,50rem);aspect-ratio:1; color:var(--paper);opacity:.34;z-index:0; } .breath--band .b-2{stroke:currentColor} /* ---------- 22. Bande de couleur pleine (temoignage) ---------- */ .band{ position:relative;overflow:hidden;border-top:0; background:var(--accent);color:var(--on-accent); padding-block:clamp(4.5rem,9vw,7.5rem); } .band .wrap{position:relative;z-index:1} .band .quote blockquote{color:var(--on-accent)} .band .quote figcaption{color:var(--on-accent-70);border-top-color:var(--on-accent-line)} .band .quote-mark{color:var(--on-accent-70)} /* ---------- 23. Emplacements image (slots) ---------- */ /* Chaque .shot / .offer-shot est un emplacement destine a recevoir la photo du praticien. Rapport d'image impose par le CSS : le remplacement d'un fichier ne casse jamais la grille. */ .shot{margin:0;grid-column:5 / -1} .shot img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover} .shot figcaption{ margin-top:.9rem;font-size:.8125rem;color:var(--ink-55); padding-left:1rem;border-left:1px solid var(--rule);line-height:1.5;max-width:34rem; } .shot-note{grid-column:1 / span 3;align-self:end;padding-bottom:.5rem} .offer-shot{margin:1.5rem 0 0;max-width:15rem} .offer-shot img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover} /* ---------- 19. Impression ---------- */ @media print{ .site-header,.nav-toggle,.callout,.btn,.breath{display:none} .band{background:none;color:var(--ink)} body{background:#fff;font-size:11pt} .section{padding-block:1.5rem;border-color:#ccc} } /* ---------- 20. Ajustements fins ---------- */ .hero .t-lead{max-width:46ch} .page-head .t-lead{max-width:38ch} .split-aside .label{margin-bottom:1rem} .split-aside h2{margin-bottom:1.25rem} .split-aside .link{display:inline-block;margin-top:1.5rem} .statement-note .link{display:inline-block;margin-top:1.25rem} .mt-l{margin-top:2.25rem} .mt-m{margin-top:1.5rem} /* Logo du praticien dans l en-tete, quand il en fournit un. */ .brand-logo{display:block;max-height:2.6rem;width:auto;max-width:14rem} @media (max-width:860px){.brand-logo{max-height:2.1rem;max-width:11rem}}