");width:.6em;height:.6em;margin-left:2px;position:relative;display:inline-block}.Logo{width:6rem;aspect-ratio:337.05/98.6667}@media (min-width: 48em){.Logo{width:17.5rem}}.Logo-bg{transform-origin:-11px -30px}.Logo-baseline{color:#777;bottom:-2px;font-size:.58rem}@media (min-width: 48em){.Logo-baseline{font-size:.9rem}}.html--with-hover .Logo:hover .Logo-bg{animation:rotate 3.5s linear}.html--with-hover .Logo:hover .Logo-a{transform:rotate(17deg)}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}.HeaderWrapper{background:linear-gradient(0deg,#0006,#00000059,#0000004d,#00000040,#0003,#00000026,#0000001a,#0000000d,#0000,#0000,#0000,#0000)}.Header{border:1px solid #ffdd28!important;box-shadow:0 10px 10px -5px #00000031}@media (min-width: 36em){.Header{min-width:0}}@media (min-width: 48em){.Header{border:0!important;box-shadow:none!important}.HeaderWrapper{background:none}}@media (min-width: 62em){.Header header{top:-2px}}.HeaderLink:not(.HeaderLink--important):hover>a,.HeaderLink.HeaderLink--current>a,.FooterLink:hover,.FooterLink--current,.html--without-hover .FooterLink:active,.html--without-hover .HeaderLink:not(.HeaderLink--important)>a:active{position:relative}.HeaderLink:not(.HeaderLink--important):hover>a:before,.HeaderLink.HeaderLink--current>a:before,.FooterLink:hover:before,.FooterLink--current:before,.html--without-hover .FooterLink:active:before,.html--without-hover .HeaderLink:not(.HeaderLink--important)>a:active:before{position:absolute;content:"";transform:rotate(.5deg);background-color:currentColor;opacity:.7}.HeaderLink:not(.HeaderLink--important):hover>a:before,.HeaderLink.HeaderLink--current>a:before,.html--without-hover .HeaderLink:not(.HeaderLink--important)>a:active:before{height:1px;bottom:6px;left:3px;right:3px}@media (min-width: 36em){.HeaderLink:not(.HeaderLink--important):hover>a:before,.HeaderLink.HeaderLink--current>a:before,.html--without-hover .HeaderLink:not(.HeaderLink--important)>a:active:before{bottom:2px}}@media (min-width: 36em){.HeaderLink:not(.HeaderLink--important):hover>a:before,.HeaderLink.HeaderLink--current>a:before,.html--without-hover .HeaderLink:not(.HeaderLink--important)>a:active:before{height:2px}}.HeaderLink.HeaderLink--important.HeaderLink--current>a:before{bottom:-2px}@media (min-width: 36em){.HeaderLink.HeaderLink--important.HeaderLink--current>a:before{bottom:2px}}@media (min-width: 48em){.HeaderLink--important.HeaderLink--current>a:before{left:14px;right:14px}}.FooterLink:hover:before,.FooterLink--current:before,.html--without-hover .FooterLink:active:before{height:1px;bottom:6px;left:8px;right:8px}@media (min-width: 48em){.FooterLink:hover:before,.FooterLink--current:before,.html--without-hover .FooterLink:active:before{bottom:-1px;left:-1px;right:-1px}}.FooterLink:hover:before,.HeaderLink:hover>a:before{transform:rotate(-.75deg)!important}.html--with-hover .FooterLink:active:before,.html--with-hover .HeaderLink:not(.HeaderLink--important)>a:active:before{content:none}.Footer :target{font-weight:700;font-size:1.2em!important;animation:appear 1s ease .75s 2}.HeaderLink--important>.Button:hover{border-color:#128a0b!important}.HeaderLink--important>.Button:active{border-color:#000!important}.HeaderLink:hover>a:before{margin-bottom:0!important}.ReferenceCard-work{--bs-border-style: dashed;border-top:1px dashed #a5acbf;border-bottom:1px dashed #a5acbf;border-left:1px solid #a5acbf;border-right:1px solid #a5acbf;color:#16114f!important;background-color:#f5f5ff!important}.ReferenceCard-work--last{border-bottom:1px solid #a5acbf;border-bottom-left-radius:var(--bs-border-radius-xl);border-bottom-right-radius:var(--bs-border-radius-xl)}.ReferenceCard-work ul{margin-bottom:0!important}@media (min-width: 36em){.ReferenceCard-work ul{padding-left:2.5rem!important}}.Clients{gap:3rem}.Client{max-width:200px;height:auto;flex-shrink:0}.DecorativeImgContainer{position:relative}.DecorativeImgContainer-img{float:right;width:120px;height:auto}@media (min-width: 48em){.DecorativeImgContainer-img{width:200px}}@media (min-width: 1800px){.DecorativeImgContainer-img{position:absolute;top:32px;right:-300px;overflow:visible;width:294px}}.MegaHeading{font-family:VC Honey MegaHeading,VC Honey Fallback,Georgia,serif}.MegaHeading{font-size:2.2rem}@media (min-width: 23em){.MegaHeading{font-size:2.7rem}}@media (min-width: 36em){.MegaHeading{font-size:2.7rem}}@media (min-width: 48em){.MegaHeading{font-size:3.8rem}}@media (min-width: 62em){.MegaHeading{font-size:5rem}}@media (min-width: 75em){.MegaHeading{font-size:5.5rem}}.MegaHeading--almost{font-size:1.5rem}.MegaHeading--almost span{font-size:.95em}@media (min-width: 23em){.MegaHeading--almost{font-size:1.9rem}.MegaHeading--almost span{font-size:.9em}}@media (min-width: 36em){.MegaHeading--almost{font-size:2.5rem}}@media (min-width: 48em){.MegaHeading--almost{font-size:3.5rem}}@media (min-width: 62em){.MegaHeading--almost{font-size:4.7rem}.MegaHeading--almost span{font-size:1em}}@media (min-width: 75em){.MegaHeading--almost{font-size:5.2rem}}.MegaSubHeading{font-size:1rem!important}@media (min-width: 48em){.MegaSubHeading{font-size:1.4rem!important}}.MegaSubHeading p:first-of-type{font-size:1.3rem!important}@media (min-width: 48em){.MegaSubHeading p:first-of-type{font-size:1.6rem!important}}@media (min-width: 62em){.Columns{column-gap:1.5rem;column-count:2}.Columns>*{break-inside:avoid}}@media (min-width: 75em){.Columns--3{column-count:3}}.box-shadow{box-shadow:0 0 #0000,0 0 #0000,0 1px 3px #0000001a,0 1px 2px -1px #0000001a}.html--mac .Columns .box-shadow{box-shadow:0 0 #0000,0 0 #0000,0 1px #0000001a,0 1px 0 -1px #0000001a}.font-family-headings{font-family:VC Honey,VC Honey Fallback,Georgia,serif!important;font-weight:600!important}.font-family-fast-headings{font-family:VC Honey MegaHeading,VC Honey Fallback,Georgia,serif!important;font-weight:600!important}.border-transparent{border-color:#0000!important}.border-danger-emphasis{border-color:#622416!important}.bg-current{background-color:currentColor!important}.border-box-color{border-color:#a5acbf!important}.border-box-width{border-width:1px!important}.w-300px{width:300px!important}.h-300px{height:300px!important}.f-blur-100{filter:blur(100px)!important}@media (min-width: 48em){.w-md-170px{width:170px!important}}.w-1{width:1rem}.h-1{height:1rem}.ratio-1x1{aspect-ratio:1/1}h1,.h1{font-size:1.9rem}.fs-2{font-size:1.375rem!important}h2,.h2{font-size:1.672rem}.fs-3{font-size:1.25rem!important}h3,.h3{font-size:1.425rem}.fs-4{font-size:1rem!important}h4,.h4{font-size:1rem}.fs-5{font-size:.875rem!important}.fs-6,.badge{font-size:.875rem!important}.fs-7{font-size:.8125rem!important}.fs-display{font-size:3rem!important}@media (min-width: 36em){.fs-sm-6{font-size:1rem!important}.fs-display{font-size:3rem!important}}@media (min-width: 48em){h1,.h1{font-size:2.7rem}.fs-2{font-size:2.25rem!important}h2,.h2{font-size:2.25rem}.fs-3{font-size:1.9rem!important}h3,.h3{font-size:1.9rem}.fs-4{font-size:1.375rem!important}h4,.h4{font-size:1.375rem}.fs-5,.fs-md-5{font-size:1.25rem!important}.fs-6,.badge,.fs-md-6{font-size:1rem!important}.fs-7{font-size:.875rem!important}.fs-md-1{font-size:2.7rem!important}.fs-md-5{font-size:1.25rem!important}.fs-md-6{font-size:1rem!important}.fs-display{font-size:4rem!important}}.badge{margin:0;padding:0;line-height:1;display:inline-block;margin-bottom:.5rem;padding-left:.5rem;padding-right:.5rem;color:rgba(var(--bs-secondary-rgb),.95)}@media (min-width: 48em){.badge{padding-top:.25rem;padding-bottom:.25rem}}.ScrollHeading{scroll-margin-top:2.5rem!important}.Prestations-img:nth-child(1){transform-origin:bottom right;transform:rotate(2.5deg) translate(-1.5rem)}.Prestations-img:nth-child(2){transform-origin:bottom right;margin-top:-14rem;transform:rotate(4deg) translate(-1.5rem)}.Prestations-img:nth-child(3){transform-origin:bottom right;margin-top:-16rem;transform:rotate(6deg) translate(-2.5rem)}@keyframes blinkoutline{0%{outline:2px solid rgba(0,0,0,0)}50%{outline:2px solid #000}to{outline:2px solid rgba(0,0,0,0)}}@keyframes reappear{to{opacity:1}}.Testimony strong{font-weight:400;background-color:#ffffcf}@keyframes disappear{to{opacity:0}}.transition{transition:all .1s ease-in}.MeWrapper>a>span{backface-visibility:hidden;transform:translateZ(0)}.MeWrapper>a:focus-visible .Stamp svg{border:2px solid Highlight!important;border:2px solid -webkit-focus-ring-color!important}.Me{filter:contrast(105%);width:120px;height:120px;transition:all .1s cubic-bezier(.55,.09,.68,.53)}@media (min-width: 48em){.Me{width:250px;height:250px}}.MeWrapper:hover .Stamp svg{animation:rotateStamp 3.5s linear}@keyframes rotateStamp{0%{transform:rotate(20deg)}to{transform:rotate(380deg)}}.html--with-hover .Me img:hover{filter:contrast(140%)}.Stamp svg{color:#f7f481;width:60px;height:60px;transform:rotate(20deg)}.Stamp span{top:19px;left:5px;width:50px;transform:rotate(24deg)}.Stamp--topleft{top:-15px;right:-25px}.Stamp--me span{font-weight:700!important;font-size:.75rem!important}.Stamp--reference span{transform:rotate(-19deg);top:22px;left:4px}@media (min-width: 48em){.Stamp svg{width:100px;height:100px}.Stamp span{top:32px;left:5px;width:90px;font-size:1.25rem!important}.Stamp--reference svg{width:80px;height:80px}.Stamp--reference span{top:28px;left:-7px}.Stamp--topleft{top:-25px;right:-25px}}.html--with-hover .CosyDuck:hover{transform:rotate(-5deg)}.html--with-hover .SingingDuck:hover svg{width:18px;height:18px;translate:-3px 2px}.html--with-hover .SingingDuck:hover svg+svg{width:20px;height:20px;translate:-3px -10px}.Stamp--me{animation-fill-mode:both;animation-timing-function:cubic-bezier(.28,.84,.42,1)}.Stamp--me{animation-duration:.5s;animation-delay:3s;animation-timing-function:cubic-bezier(.47,0,.74,.71)}@keyframes appear{0%{opacity:0}to{opacity:1}}@keyframes appearRight{0%{opacity:0;transform:translate(-50px)}to{opacity:1;transform:translate(0)}}@keyframes stamp{0%{transform:scale(4)}to{transform:none}}@media (min-width: 62em){.html--js:not(.html--no-animations) .appear{transform:translate(-50px);opacity:0;transition:opacity,transform cubic-bezier(.17,.84,.44,1);transition-duration:.6s;will-change:opacity,transform}.html--js:not(.html--no-animations) .appear--right{transform:translate(50px)}.html--js:not(.html--no-animations) .appear--visible{opacity:1;transform:translate(0)}}.MegaHeading{animation-fill-mode:both;animation-name:appearRight;animation-duration:.6s;animation-delay:.2s;animation-timing-function:cubic-bezier(.17,.84,.44,1)}.MegaHeading:nth-child(2){animation-delay:.2s}.MegaHeading:nth-child(3){animation-delay:.3s}.MegaHeading:nth-child(4){animation-delay:.4s}.MegaHeading:nth-child(1){animation-delay:.5s}.Header nav,.MegaSubHeading,.Prestations{transition:opacity}html:not(.html--interacted) .Page--home :where(.MegaSubHeading){animation-fill-mode:both;animation-name:appear;animation-duration:.6s;animation-delay:1.5s;animation-timing-function:var(--reveal-timing)}@media (min-width: 48em){html:not(.html--interacted) .Page--home :where(.Prestations,.Header,.Header nav){animation-fill-mode:both;animation-name:appear;animation-duration:.6s;animation-delay:1.5s;animation-timing-function:var(--reveal-timing)}}.html--no-animations .MegaHeading,.html--no-animations .Header,.html--no-animations .Header nav,.html--no-animations .MegaSubHeading,.html--no-animations .Prestations,.html--no-animations .Stamp,.html--no-animations .Me,.html--no-animations .MeWrapper:hover .Stamp svg,.html--no-animations .Logo:hover .Logo-bg{opacity:1!important;animation:none!important;transition:none!important}.html--no-animations .transition{transition:none!important}.html--no-animations .HomeCard:hover svg[data-icon-name=stamp]{opacity:0!important}.html--no-animations .Page--home .Header{border-color:rgba(var(--bs-secondary-rgb),var(--bs-border-opacity))}@media (prefers-reduced-motion: reduce){.MegaHeading,.Header,.Header nav,.MegaSubHeading,.Prestations,.Stamp,.Me,.MeWrapper:hover .Stamp svg,.Logo:hover .Logo-bg{opacity:1!important;animation:none!important;transition:none!important}.transition{transition:none!important}.HomeCard:hover svg[data-icon-name=stamp]{opacity:0!important}.Page--home .Header{border-color:rgba(var(--bs-secondary-rgb),var(--bs-border-opacity))}}.Button:where(:hover,:focus-visible,:active)>span:last-child{width:calc(100% + 2px)!important;height:calc(100% + 2px)!important}
Je parle anglais !
View this website in English Ne plus afficher la suggestion de changement de langue
Ce site est accessible, éco-conçu et rapide Accessible
Le site suit 100% des recommandations du RGAA (le référentiel général d’amélioration de l’accessibilité) édité par la direction interministérielle du numérique.
Concrètement, cela veut dire par exemple que si vous avez du mal à distinguer les couleurs, si vous n’êtes pas en capacité d’utiliser une souris, si vous utilisez un lecteur d’écran audio pour naviguer, l’usage de ce site est parfaitement possible.
Éco-conçu
On va pas se mentir : un site vraiment 100% éco-conçu, c’est un site qu’on a évité de créer. Mais si on a une
présence sur le web, posons-nous la question de son impact environnemental.
Ce site est constitué de très peu de pages, et n’a pas de formulaire de contact, dans le but de réduire les appels serveur et au final l’impact environnemental. Le gros accent mis sur les performances web (voir plus bas) joue aussi un rôle très important sur l’éco-conception.
Il est estimé que 0,01 g de CO₂ en moyenne est produit à chaque visite sur une page du site. C’est 69 fois moins qu’en moyenne sur le web d’après le Web Almanac (anglais) . Vous voyez ce que ça fait déjà, 69 fois moins, Larmina ?
Vous pouvez voir en détail cet audit automatisé réalisé sur kastor.green, où les pages de manu.habite.la obtiennent en moyenne un score de 98/100 en éco-conception :
Rapide
Ce site est rapide. Très rapide.
Site statique, à peine quelques lignes de JavaScript, images en AVIF, css inline traité par purgecss, (rares) polices de caractères subsettées … Beaucoup de jargon qui donne un résultat qui parle de lui-même. Et qui est encore améliorable !
Pour fonctionner, le site télécharge 30 fois moins de données qu’un site web moyen d’après le Web Almanac (anglais) .
Une attention particulière est mise sur les Core Web Vitals , des mesures clés de performances web, reconnues dans l’industrie.
Sur WebPageTest, avec la simulation d’un téléphone vieux, lent, et loin (Motorola G 4 aux États-Unis, en 4G avec 170ms
de latence), le chargement du site met à peine plus d’une seconde. Essayez par vous-même avec le site que vous voulez,
vous verrez qu’un téléphone vieux de juste quelques années, ça rame !
Allez voir l’audit WebPageTest en détail :
Conclusion
Tout compte fait, ce site est une petite représentation de ce à quoi ça peut ressembler de travailler avec moi. Une focalisation sur les points fondamentaux du web , avec une certaine attention du détail, même pour un petit site de contenu.
On se lance ?