@charset "utf-8"; /******************************************/ /*transform: translateZ(0); /* activation de l'Acceleration Materiel */ /******************************************/ /************************************************************ The new CSS reset - version 1.8.4 (last updated 14.2.2023) GitHub page: https://github.com/elad2412/the-new-css-reset Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug ***********************************************************/ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *:before, *:after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /***************************************************************/ /***************************************************************/ /***************************************************************/ /* Amélioration des comportement par défaut des médias */ img, picture, video, canvas, svg { display: block; height: auto; width: 100%; } /* Suppressions des margin et padding ; implique que toutes les marges “naturelles” des éléments soient redéfinies */ html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } /* Réinitalisation des propriétés typographiques sur les éléments de formulaire */ input, button, textarea, select { font: inherit; margin: 0; } /* suppression des bordures sur les iframes */ iframe { border: 0; } h1, h2, h3, h4, h5, h6 { font-family: "adano_semi-bold"; text-align: center; text-transform: uppercase; } b { font-weight: 500; } /***************************************************************/ /*********************** ROOT ********************************/ /***************************************************************/ :root { --colorBeige: rgb(223, 207, 185); --colorBleu: rgb(60, 85, 100); --colorGris: rgb(150, 150, 150); --colorTxt: rgb(0, 0, 0); --colorWhite: white; font-size: 100%; } /***************************************************************/ /*********************** ROOT ********************************/ /***************************************************************/ /* strategie font size et taille de bloc en fonction du site : 1/ 100% sur :root 2/ chaque section on regle en rem avec clamp pour avoir une valeur min et max 3/ chaque paragraphe on regle en em. pour changer on agie sur les rem, ou sur :root pour un changement global. */ html { width: 100%; max-width: 100%; overflow-x: hidden; } html:focus-within { /* les elements html qui ont la propriété tabindex="-1" prendront en charge le smooth scoling */ scroll-behavior: smooth; } body { width: 100%; color: var(--colorTxt); font-family: "Montserrat", sans-serif; letter-spacing: 0.02em; font-size: clamp(15px, 2vw, 20px); } :focus { outline: none; } :focus-visible { outline: 2px dotted black; border-radius: 2px; outline-offset: 1px; } .thinFocus:focus-visible { outline: 1.5px dotted black; border-radius: 0; } *[tabindex="-1"]:focus { outline: 0; } a { text-decoration: none; color: inherit; } img, video { width: 100%; vertical-align: bottom; } video { cursor: pointer; } .clearfix { clear: both; } :active {} :focus {} :focus-within {} :target {} :hover {} :visited {} :focus-visible {} /***************************************************************/ /*********************** header ********************************/ /***************************************************************/ #myHeader {} #menu_open, #retour_haut { display: inline-block; position: fixed; top: 0.5em; right: max(0.5em, calc((100vw - 1700px) / 2) + 0.3em); width: 1.4em; height: 1.4em; line-height: 1.4em; font-family: "Material Icons"; text-align: center; font-size: 2.3em; font-weight: 100; border-radius: 50%; color: var(--colorBleu); background-color: rgba(255, 255, 255, 0.3); z-index: 99999; cursor: pointer; transition: all 0.5s; } #menu_open { z-index: 999999999; } #menu_open:before { content: "menu"; font-family: "Montserrat"; font-size: 0.4em; font-weight: 500; display: block; transform: scaleX(0.85); } #menu_open:checked:before { content: "close"; } .menu_Box { position: fixed; top: 0; right: 0; margin: auto; width: 0%; height: 100vh; background-color: var(--colorBleu); z-index: 99999999 !important; overflow: auto; overscroll-behavior: none; -ms-overflow-style: none; scrollbar-width: none; visibility: hidden; transition-property: width, visibility; transition-duration: 0.9s; transition-timing-function: cubic-bezier(0.93, -0.04, 0.16, 1.25); } .menu_Box::-webkit-scrollbar { /* safari, chrome, opera */ display: none; } #menu_open:checked ~ .menu_Box { visibility: visible; width: 100%; } .menu_BoxContent { display: grid; align-content: center; align-items: center; width: 22em; height: 100vh; max-width: 80vmin; margin: auto; } .menu_BoxContent div { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 0px 0px; grid-auto-flow: row; grid-template-areas: ". accueilLien ." "conceptionLien . renovationLien" ". contactLien ."; align-items: center; } .menu_BoxContent a { transition: all 0.5s; } .menu_BoxContent a:focus-visible { transform: scale(0.9); outline: none; } .menu_BoxContent a:hover { transform: scale(0.9); } .accueilLien img { width: 200%; margin-left: -50%; /* margin-bottom: 10%; */ } .conceptionLien img, .renovationLien img{ width: 200%; margin-left: -50%; } .contactLien img{ width: 200%; margin-left: -50%; /* margin-top: -10%; */ } .conceptionLien { grid-area: conceptionLien; margin-top: 0%; z-index: 1; clip-path: polygon(50% 0%, 150% 50%, 50% 100%, -50% 50%); } .contactLien { grid-area: contactLien; align-self: center; margin-top: -190%; z-index: 2; clip-path: polygon(50% 0%, 150% 50%, 50% 100%, -50% 50%); } .renovationLien { grid-area: renovationLien; margin-top: 0; z-index: 3; clip-path: polygon(50% 0%, 150% 50%, 50% 100%, -50% 50%); } .accueilLien { grid-area: accueilLien; align-self: center; margin-bottom: -190%; z-index: 2; clip-path: polygon(50% 0%, 150% 50%, 50% 100%, -50% 50%); } /***************************************************************/ /*********************** FOOTER ********************************/ /***************************************************************/ #section_footer { position: relative; margin: auto; max-width: 2000px; overflow: hidden; background-color: var(--colorBeige); color: black; } footer { margin: auto; letter-spacing: 1px; line-height: 2.8vh; font-size: 1em; font-weight: 400; text-align: center; z-index: 9; } /***************************/ #retour_haut { top: unset; bottom: 0.5em; } #retour_haut a { width: 1.4em; height: 1.4em; display: inline-block; } #retour_haut a span { display: inline-block; transform: rotate(-90deg) scaleX(1.2); } #retour_haut a:focus { border-radius: 50%; } /********************/ .footerMenu { margin: auto; justify-content: center; align-items: center; grid-gap: 1em; padding: 2em; border-top: solid 2px hsl(35 15% 60% / 1); background: linear-gradient(hsl(35 25% 70% / 1), var(--colorBeige) 20%); } .footerMenu h2{ flex-grow: 2; font-family: "adano_bold"; font-size: 1.2em; padding: 1em 0 2em; } .footerMenu div { display: flex; flex-wrap: wrap; width: 100%; margin: auto; row-gap: 0; column-gap: 4vw; justify-content: center; align-content: center; } .footer_logo { display: inline-block; background: url(../images/logos-visuels_AD/losangeBleu.svg); background-repeat: no-repeat; background-position: 50% 48%; background-size: 90%; width: 60%; max-width: 13em; } .footer_logo img { width: 100%; height: 100%; } /***************************/ .logosPartenaires, .logosclients{ border: 2px solid black; border-radius: 2em; margin: 0 5% 5%; background-color: var(--colorBleu); padding: 2em 0; color: var(--colorBeige); } .titre_logos_footer { text-align: center; padding: 1em; text-transform: uppercase; font-size: 1.15em; } .FlexImgList { margin: 0 auto; display: grid; grid-template-columns: repeat(8, 1fr); grid-column-gap: 0.6em; grid-row-gap: 0.8em; align-items: center; padding: clamp(1em, 5%, 3em); max-width: 1500px; /* background-color: var(--colorBleu); */ } .FlexImg { position: relative; margin: 0; display: flex; justify-content: center; align-items: center; text-align: center; } .FlexImg img { display: inline-block; width: 100%; min-width: 100%; height: calc((60vw - 0.5em * 7) / 8); max-height: 100px; padding: 0.5em; background: #ffffff; background: white; object-fit: contain; border: dotted grey 1px; } /*************************************/ footer a { transition: 0.2s; } .footerMenu a:hover, .footerMenu a:focus { transform: scale(1.1); } .footerAdresse a:hover, .footerAdresse a:focus { font-size: 1.1em; line-height: 0.75em; font-weight: 600; } .footerAdresse{ background: var(--colorBleu); background: linear-gradient(hsl(202.5deg 25% 31.37%) 55%, hsl(203 25% 20% / 1)); color: var(--colorBeige); padding: 4em; } footer .mail { display: block; max-width: 30em; margin: auto; padding: 2em; letter-spacing: 1.5px; font-weight: 600; } .pt_txt { max-width: 70em; margin: auto; padding: 2em; display: block; font-size: 0.8em; line-height: 2em; } /*=============================================================*/ /* @MEDIA @MEDIA @MEDIA @MEDIA @MEDIA @MEDIA /*=============================================================*/ @media (any-hover: hover) { #menu_open:hover, #retour_haut:hover { transform: scale(1.2); } } /***********************************************/ /* * * * * * * * * @ASPECT RATIO * * * * * * */ /*********************************************/ /* For images to not be able to exceed their container img { max-inline-size: 100%; max-block-size: 100%; } */ /* * * au dessus de *****/ @media screen and (min-width: 1450px) { .logosPartenaires, .logosclients{ margin: 0 12% 5%; } } /*********************************************/ /*********************************************/ /* * * au dess0us de *****/ @media screen and (max-width: 1350px) { .FlexImgList { grid-template-columns: repeat(6, 1fr); } } /*********************************************/ /*********************************************/ /* * * au dessous de ********/ @media screen and (max-width: 1050px) { .FlexImgList { grid-template-columns: repeat(4, 1fr); } .FlexImg img { height: calc((60vw - 0.5em * 3) / 6); } } /*********************************************/ /*********************************************/ /* * * au dessous de ***/ @media screen and (max-width: 703px) { .footer_logo.F2 { order:1; } .FlexImgList { grid-template-columns: repeat(2, 1fr); grid-column-gap: 1em; grid-row-gap: 1em; } .FlexImg img { height: calc((60vw - 0.5em * 1) / 2); } } /*********************************************/ /*********************************************/