/* Built by Noemie Baudouin https: //github.com/noemirtil */

 @font-face {
     font-family: 'calisto-mt-bold';
     font-style: normal;
     font-weight: 900;
     font-display: swap;
     src: url('fonts/calisto-mt-bold.ttf') format('truetype');
 }

 @font-face {
     font-family: 'msjhl';
     font-style: normal;
     font-weight: 900;
     font-display: swap;
     src: url('fonts/microsoft-jhenghei.ttf') format('truetype');
 }

 :root {
     --olive-dark: #898951;
     --olive-black: #33331E;
     --olive-black-hsl: 60deg 26% 16%;
     --olive: #748c63;
     --olive-mid-light: #A7BA9A;
     --olive-light: #e6ede1;
     --olive-lighter: #f3f6f1;

     --shadow-elevation-medium:
         0.1px 1px 1px hsl(var(--olive-black-hsl) / 0.3),
         0.2px 2px 2.1px -0.9px hsl(var(--olive-black-hsl) / 0.25),
         0.4px 4px 4.3px -1.7px hsl(var(--olive-black-hsl) / 0.2),
         0.8px 7px 9.6px -2.6px hsl(var(--olive-black-hsl) / 0.15),
         1.6px 10px 19.6px -3.5px hsl(var(--olive-black-hsl) / 0.1);
     --shadow-elevation-low:
         0.1px 1px 1px hsl(var(--olive-black-hsl) / 0.1),
         0.2px 2.1px 2.1px -0.9px hsl(var(--olive-black-hsl) / 0.08),
         0.4px 4.4px 4.3px -1.7px hsl(var(--olive-black-hsl) / 0.06),
         0.8px 7px 7px -2.6px hsl(var(--olive-black-hsl) / 0.04);
     --text-shadow: 2px 2px 2px #33331e88;
 }

 html {
     font-size: 16px;
     scroll-behavior: smooth;
 }

 *,
 *::before,
 *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     width: 100vw;
     overflow-x: hidden;
     color: inherit;
     /* To fix some spilling problems with grid and flex */
     min-width: 0;

     /* for accessibility, increased line-height */
     line-height: 1.5;
     /* For smoother fonts on some mac browsers */
     -webkit-font-smoothing: antialiased;

     min-height: 100dvh;

     /* Avoid text overflow */
     overflow-wrap: break-word;

     font-family: msjhl, Arial;

     *:focus {
         outline: 2px solid var(--olive);
     }

     p,
     ol,
     ul,
     form {
         /* Improve line wrapping */
         text-wrap: balance;
         overflow-wrap: break-word;
         padding: 0.5rem 5vw 0.8rem 5vw;
         list-style-type: circle;
     }

     h1,
     h2,
     h3,
     h4,
     h5,
     h6 {
         font-family: calisto-mt-bold, Georgia;
         letter-spacing: 0.04rem;
         text-wrap: balance;
         overflow-wrap: break-word;
         padding: 1rem 5vw 0 5vw;
     }

     h2 {
         /* To offset the anchor scrolling navigation */
         position: relative;

         span {
             position: absolute;
             top: calc(-7rem - 5vw);
         }
     }

     a {
         text-decoration: none;
         color: inherit;
         /* For Safari's rendering bugs */
         /* AND necessary for transform on inline elements */
         display: inline-block;

     }

     a:hover {
         cursor: pointer;
     }

     hr {
         color: var(--olive);
         border-top: 0 solid var(--olive);
         border-left: 0 solid var(--olive);
         border-bottom: solid 0.16rem var(--olive);
         margin: 2rem 0;
         width: 20vw;
     }

     input,
     optgroup,
     textarea,
     select {
         font: inherit;
     }

     button,
     [type="button"],
     [type="reset"],
     [type="submit"] {
         /* Correct the inability to style clickable types in iOS and Safari */
         -webkit-appearance: button;

         font-family: system-ui, Arial;
     }

     img,
     iframe,
     picture,
     video,
     canvas,
     svg {
         width: 100%;
         height: auto;
         overflow: hidden;
         object-fit: cover;
         /* Remove the gap between content and the bottom of their containers */
         vertical-align: middle;
         border: none;
     }

     fieldset {
         /* Remove default fieldset styles */
         border: 0;
         margin: 0;
         padding: 0;
     }

     textarea {
         resize: none;
     }

     sub,
     sup {
         font-size: 75%;
         line-height: 0;
         position: relative;
         vertical-align: baseline;
     }

     progress {
         /* Add the correct vertical alignment in Chrome, Firefox, and Opera */
         vertical-align: baseline;
     }

     /* Correct the cursor style of increment and decrement buttons in Chrome */
     [type="number"]::-webkit-inner-spin-button,
     [type="number"]::-webkit-outer-spin-button {
         height: auto;
     }

     [type="search"] {
         /* Correct the odd appearance in Chrome and Safari */
         -webkit-appearance: textfield;
         /* Correct the outline style in Safari */
         outline-offset: -2px;
     }

     [type="search"]::-webkit-search-decoration {
         /* Remove the inner padding in Chrome and Safari on macOS */
         -webkit-appearance: none;
     }

     ::-webkit-file-upload-button {
         /* Correct the inability to style clickable types in iOS and Safari */
         -webkit-appearance: button;
         /* Change font properties to `inherit` in Safari */
         font: inherit;
     }

     details {
         /* Add the correct display in Edge and Firefox */
         display: block;
     }

     summary {
         /* Add the correct display in all browsers */
         display: list-item;
     }

     .hidden {
         display: none;
     }
 }

 header {
     position: sticky;
     top: 0;
     z-index: 1;
     /* background-color: #e6ede1e4; */
     background-image:
         linear-gradient(115deg,
             var(--olive-lighter),
             var(--olive-light));
     transition: all 0.24s;
     border-bottom: solid 0.2rem var(--olive);

     #title-desk {
         display: none;
     }

     .shadow {
         top: -200vh;
         height: 200vh;
         width: 100vw;
         right: 0;
         position: fixed;
         background-image:
             linear-gradient(#002011c8, #0a2d14c1);
         backdrop-filter: blur(9px);
     }

     .nav-mobile {
         position: absolute;
         top: -200vh;
         height: 100vh;
         width: 100vw;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         font-size: 1.8rem;
         text-align: center;
         transition: all 0.5s;
         gap: 2rem;
         color: white;

         &>.current-page {
             border-bottom: 0.18rem solid white;
             transition: all 0.5s;

             &:hover {
                 cursor: default;
                 transition: all 0.2s;
             }
         }

         &>.current-not {
             border-bottom: 0.18rem solid transparent;
             transition: all 0.5s;

             &:hover {
                 color: white;
                 border-bottom: 0.18rem solid white;
                 transform: scale(1.12);
                 cursor: pointer;
                 transition: all 0.2s;
             }

             /* Border animation */
             &::after {
                 content: '';
                 position: absolute;
                 width: 0;
                 height: 0.1rem;
                 left: 50%;
                 bottom: -0.1rem;
                 background-color: white;
                 transition: all 0.4s;
             }

             &:hover::after {
                 transition: all 0.14s;
                 width: 100%;
                 left: 0;
             }
         }
     }

     .header-cont {
         backdrop-filter: blur(8px);

         .burger {
             position: fixed;
             right: 5vw;
             top: 4vw;
             background: none;
             border: none;
             transition: all 0.5s;
             z-index: 1;

             &:hover {
                 cursor: pointer;
                 transform: scale(1.4);
                 transition: all 0.2s;
             }
         }

         .burger__bar1,
         .burger__bar2,
         .burger__bar3 {
             background-color: black;
             width: 21px;
             height: 3px;
             margin: 4px 0;
             transition: all 0.6s;
         }

         .burger--open .burger__bar1 {
             transition: all 0.6s;
             transform: translate(0, 7px) rotate(-45deg);
             background-color: white;
         }

         .burger--open .burger__bar2 {
             transition: all 0.5s;
             background-color: white;
             transform: translate(-95vw, -10vh) rotate(-1440deg);
         }

         .burger--open .burger__bar3 {
             transition: all 0.6s;
             transform: translate(0, -7px) rotate(45deg);
             background-color: white;
         }

         .title {
             font-size: max(1rem, 6.7vw);
             line-height: max(1rem, 8vw);
             padding-top: 1.2rem;
         }

         .subtitle {
             position: relative;
             font-family: msjhl, Arial;
             letter-spacing: 0.014rem;
             font-size: max(1rem, 4.4vw);
             font-weight: 900;
             padding: 0 5vw 2vw 5vw;
         }

         .heading-hidden,
         .heading-hidden>.subtitle {
             color: white;
         }

         .lang-set {
             width: max(226px, 58vw);
             padding: 0 0 4vw 5vw;
             display: flex;
             justify-content: space-between;
             position: relative;
             z-index: 1;

             a {
                 background-color: transparent;
                 color: black;
                 font-weight: 500;
                 font-family: system-ui, Arial;
                 font-size: max(1rem, 3.5vw);
                 padding: 0.1rem;
                 border: none;
                 transition: all 0.5s;

                 &.current-page {
                     border-bottom: 0.18rem solid var(--olive);
                     transition: all 0.5s;

                     &:hover {
                         cursor: default;
                         transition: all 0.2s;
                     }
                 }

                 &.current-not {
                     /* Spaceholder to avoid jumping */
                     border-bottom: 0.18rem solid transparent;
                     transition: all 0.6s;
                     /* Necessary for border animation */
                     position: relative;

                     &:hover {
                         cursor: pointer;
                         border-bottom: 0.18rem solid var(--olive);
                         transition: all 0.6s;
                     }

                     /* Border animation */
                     &::after {
                         content: '';
                         position: absolute;
                         width: 0;
                         height: 0.1rem;
                         left: 50%;
                         bottom: -0.1rem;
                         background-color: var(--olive);
                         transition: all 0.5s;
                     }

                     &:hover::after {
                         transition: all 0.14s;
                         width: 100%;
                         left: 0;
                     }
                 }
             }
         }

         .lang-set-hidden {
             a {
                 color: white;

                 &.current-page {
                     border-bottom: 0.18rem solid white;
                 }

                 &.current-not {
                     &:hover {
                         color: white;
                         border-bottom: 0.18rem solid white;
                     }

                     /* Border animation */
                     &::after {
                         background-color: white;
                     }
                 }
             }
         }
     }

     .show-mob {
         top: 0;
         transition: all 0.5s;
     }

     .nav-desktop {
         display: none;
     }

     .show-desk {
         display: flex;
         left: 0;
     }
 }

 main {
     display: flex;
     flex-direction: column;
     align-items: center;

     .cookies {
         position: fixed;
         bottom: 0;
         background-color: var(--olive);
         color: white;
         font-family: system-ui, Arial;
         font-weight: 600;
         padding: 0.8rem 1rem 0.4rem 1rem;
         text-align: center;
         border-top-left-radius: 1rem;
         border-top-right-radius: 1rem;
         transition: all 2s;
         z-index: 1;
     }

     #form-shadow {
         height: 200vh;
         width: 100vw;
         right: 0;
         position: fixed;
         background-image:
             linear-gradient(#002011c8, #0a2d14c1);
         backdrop-filter: blur(9px);
         z-index: 2;
     }

     .form-shadow-class {
         top: -200vh;
     }

     .show-form {
         display: block;
         top: 0;
     }

     #result {
         height: 100vh;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         text-align: center;
         padding: 1rem;

         p {
             color: white;
             font-size: min(34px, 7vw);
             white-space: pre-line;
             /* Necessary for escaping \n newline in JS innerHTML t9n */
         }
     }

     section {
         width: 100vw;

         h3 a,
         p a {
             text-decoration: underline var(--olive) 2px;
             -webkit-transition: all 0.6s;

             &:hover {
                 -webkit-transition: all 0.2s;
                 text-decoration: underline var(--olive-mid-light) 4px;
                 -webkit-transform: scale(1.02) translateY(-0.03rem);
             }
         }
     }

     .accueil-section {
         display: flex;
         flex-direction: column;
         align-items: center;
         text-align: center;

         .accueil-title h2 {
             font-size: max(1rem, 5.6vw);
             line-height: max(1.8rem, 7vw);
             font-weight: 400;
             letter-spacing: 0.016rem;
             padding-top: 1.6rem;

             &.second-line {
                 padding-top: 0;
             }
         }

         .pic-cont {
             margin-top: 1rem;
             background-image:
                 linear-gradient(115deg,
                     var(--olive-lighter),
                     var(--olive-light));
             border-radius: 0.8rem;

             img {
                 padding-top: 1rem;
                 margin-inline: 14.5vw 5.5vw;
                 width: 70vw;
             }
         }
     }

     .accueil {
         /* trick to offset the anchor scrolling navigation */
         padding: 0;
         top: calc(-26rem - 40vw);
     }

     .aj {
         text-align: center;
         background-color: var(--olive-lighter);
         border-radius: 0.8rem;
         width: 90%;
         margin-inline: auto;
         margin-block: 1rem;

         h3 {
             letter-spacing: 0;
             font-size: 1.05rem;
             font-family: msjhl, Arial;
             padding: 0.8rem;
         }
     }

     .rdv-cont {
         width: 90%;
         margin-inline: auto;

         .rdv {
             width: fit-content;
             font-family: system-ui, Arial;
             background: var(--olive);
             color: white;
             font-weight: 700;
             padding: 0.6rem 1.6rem 0.5rem 1.6rem;
             font-size: 1.2rem;
             border-radius: 0.8rem;
             border: none;
             display: flex;
             justify-content: center;
             align-items: center;
             box-shadow: var(--shadow-elevation-low);
             transition: all 0.6s;
             margin-inline: auto;
             margin-block: 2rem 1rem;

             &:hover {
                 cursor: pointer;
                 transform: scale(1.1);
                 box-shadow: var(--shadow-elevation-medium);
                 transition: all 0.24s;
             }
         }
     }

     .cards-flex {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 1rem;
         margin-top: 1rem;

         .card {
             width: 90vw;
             border-radius: 0.8rem;
             border: solid 3px var(--olive-light);
             margin-bottom: 1.6rem;

             h3 {
                 padding-right: 0;
             }

             & ul {
                 padding-left: 2rem;

                 li {
                     padding-bottom: 0.6rem;
                 }
             }

             h4 {
                 padding: 0.5rem 0 0 2rem;
                 font-size: max(1rem, 3.2vw);
             }

             .card-head {
                 display: flex;
                 padding-bottom: 0.5rem;

                 img {
                     padding: 1rem 0 0 2rem;
                     width: 4rem;
                 }

                 .airplane {
                     width: 4.5rem;
                     transform:
                         translateY(1rem) translateX(0.2rem) rotate(-45deg);
                 }

                 .es-airplane {
                     transform:
                         translateY(2rem) translateX(0.2rem) rotate(-45deg);
                 }

                 .earth,
                 .hands,
                 .graduate {
                     transform:
                         scale(0.7);
                     padding-inline: 5px;
                     margin-left: 1.2rem;
                     padding-top: 0.4rem;
                 }

                 h3 {
                     position: relative;
                     top: calc(1.2rem - 1.6vw);
                     font-size: max(1.1rem, 3.6vw);
                     padding-left: 0.4rem
                 }

                 .eloignement {
                     padding-left: 1rem;
                 }


                 .graduate {
                     position: relative;
                     top: 1.2rem;
                 }
             }

             #graduate-head {
                 padding: 0;
             }

             .naturalisation,
             .forzosa {
                 padding: 0 0 0.5rem 5.5rem;
                 font-size: max(1.1rem, 3.6vw);
             }

             .forzosa {
                 transform:
                     translateY(-0.2rem);
             }
         }
     }

     .contact-section {
         form {

             #nom,
             #prenom,
             #email,
             #email-confirm,
             #telephone,
             #message {
                 width: 100%;
                 border-radius: 0.8rem;
                 border: solid 3px var(--olive-light);
                 margin-bottom: 1rem;
                 margin-top: 0.2rem;
                 padding: 0.3rem 0.8rem 0.2rem 0.8rem;
                 color: var(--olive-black);

                 &::placeholder {
                     color: var(--olive-dark);
                     opacity: 0.6;
                 }
             }

             #email {
                 margin-bottom: 0.3rem;
             }

             .submit {
                 background: var(--olive);
                 color: white;
                 font-weight: 700;
                 padding: 0.8rem 1.6rem 0.7rem 1.6rem;
                 font-size: 1.2rem;
                 border-radius: 0.8rem;
                 border: none;
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 box-shadow: var(--shadow-elevation-low);
                 transition: all 0.6s;
                 margin-block: 1rem;
                 margin-inline: auto;

                 &:hover {
                     cursor: pointer;
                     transform: scale(1.1);
                     box-shadow: var(--shadow-elevation-medium);
                     transition: all 0.24s;

                     .arrow {
                         transform: rotate(180deg) scale(1.4);
                         text-shadow: var(--text-shadow);
                         transition: all 0.24s;
                     }
                 }
             }
         }

         .coordonnees {
             display: flex;
             width: 100vw;
             justify-content: space-evenly;
             margin-block: 1rem;

             .tel,
             .adresse {
                 text-align: center;
                 background-color: white;
                 color: var(--olive-black);
                 border: solid 2px var(--olive-light);
                 width: 40vw;
                 border-radius: 0.8rem;
                 font-size: 1rem;
                 transition: all 0.5s;
                 box-shadow: var(--shadow-elevation-low);
                 padding-block: 1rem;

                 &:hover {
                     cursor: pointer;
                     color: black;
                     transform: scale(1.04);
                     transition: all 0.1s;
                     border: solid 2px var(--olive);
                     box-shadow: var(--shadow-elevation-medium);
                 }
             }
         }

         iframe {
             width: 100vw;
             height: 100vw;
         }

         .symbols {
             display: flex;
             justify-content: center;
             gap: 2rem;
             width: 8rem;
             margin-inline: auto;
             margin-top: 1rem;

             .linkedin {
                 height: 2.6rem;
                 width: auto;
             }

             .lgbt {
                 height: 2.55rem;
                 width: auto;
                 padding: 0.22rem;
             }
         }

         .arrow {
             width: 1rem;
             transition: all 0.6s;
             transform: rotate(-180deg);
         }
     }

     #iframe {
         border-radius: 0.8rem;
         border: 3px solid var(--olive-light);
     }
 }

 footer {
     padding: 4rem 0 1rem 0;
     text-align: center;
     font-size: 0.8rem;
     color: var(--olive);

     a {
         color: var(--olive-mid-light);
         transition: all 0.6s;

         &:hover {
             transition: all 0.16s;
             color: var(--olive);
         }
     }

 }

 /* MARK: @media 450
*/
 @media screen and (min-width: 450px) {

     header {

         #title-mob,
         #title-desk {
             font-size: 1.9rem;
             padding-top: 1.4rem;
             line-height: 3.06rem;
         }

         #subtitle {
             font-size: 1.26rem;
             top: -0.2rem;
             padding-bottom: 0.7rem;
         }
     }

     main {

         /* To offset the anchor scrolling navigation */
         #cabinet,
         #domaines,
         #engagement,
         #honoraires,
         #contact {
             top: calc(-8rem - 11vw);
         }

         #accueil-title h2 {
             line-height: 2.4rem;
         }

         .second-line {
             padding-top: 1vw;
         }

         #contact-section .map {
             width: 100%;
             display: flex;
             justify-content: center;

             iframe {
                 width: 450px;
                 height: 450px;
             }
         }
     }

 }

 /* MARK: @media 600
*/
 @media screen and (min-width: 600px) {
     header {

         #title-mob {
             display: none;
         }

         #title-desk {
             display: flex;
         }

         #lang-set {
             width: 21.6rem;
             padding-bottom: 1rem;

             a {
                 font-size: 1.3rem;
             }
         }
     }

     main {

         /* To offset the anchor scrolling navigation */
         #cabinet,
         #domaines,
         #engagement,
         #honoraires,
         #contact {
             top: -10rem;
         }

         .accueil-section {
             display: grid;
             grid-template-columns: 45vw 45vw;
             grid-template-areas: "accueil-title portrait";
             background-image:
                 linear-gradient(135deg,
                     var(--olive-lighter),
                     var(--olive-light));
             width: 90vw;
             margin: 2rem 5vw 0 5vw;
             border-radius: 1rem;

             .accueil-title {
                 position: relative;
                 grid-area: accueil-title;
                 display: flex;
                 flex-direction: column;
                 align-items: flex-start;
                 width: max-content;
                 justify-self: flex-end;

                 h2 {
                     font-size: 1.7rem;
                     padding: 0;
                 }

                 #second-line {
                     padding-top: 0.5rem;

                     &::before {
                         display: none;
                     }
                 }
             }

             .titulo-esp {
                 left: 1rem;
             }

             .pic-cont {
                 background-image: none;
                 margin: 0;
                 grid-area: portrait;
                 display: flex;
                 position: relative;
                 right: 1rem;

                 #portrait {
                     padding-top: 1rem;
                     padding-right: 1rem;
                     margin-inline: 0;
                 }
             }
         }

         .cards-flex .card {
             .card-head {

                 img {
                     padding-right: 2px;
                 }

                 h3 {
                     font-size: 1.4rem;
                     top: calc(0.5rem + 0.1vw);
                 }
             }

             h4 {
                 font-size: 1.3rem;
             }

             .naturalisation,
             .forzosa {
                 font-size: 1.4rem;
             }
         }

         #contact-section .coordonnees {

             .tel,
             .adresse {
                 width: 15rem;
             }
         }

     }
 }

 /* MARK: @media 700
*/
 @media screen and (min-width: 700px) {

     main {

         .accueil-section {

             #accueil-title {
                 left: 0;

                 h2 {
                     font-size: calc(1rem + 2vw);
                     line-height: 2.4rem;
                 }
             }

             .pic-cont {
                 width: 20rem;
                 right: 0;
             }
         }
     }
 }

 /* MARK: @media 1000
*/
 @media screen and (min-width: 1000px) {

     header {
         display: flex;
         justify-content: center;

         .header-cont {
             width: min(90vw, 70rem);
         }

         .burger {
             display: none;
         }

         .nav-desktop {
             position: fixed;
             width: 20rem;
             top: 2.15rem;
             right: 0;
             display: flex;
             justify-content: space-between;

             .sep {
                 color: var(--olive);
             }

             &>.current-page {
                 border-bottom: 0.18rem solid var(--olive);
                 transition: all 0.5s;

                 &:hover {
                     cursor: default;
                     transition: all 0.2s;
                 }
             }

             &>.current-not {
                 /* Spaceholder to avoid jumping */
                 border-bottom: 0.18rem solid transparent;
                 transition: all 0.6s;
                 /* Necessary for border animation */
                 position: relative;

                 &:hover {
                     cursor: pointer;
                     border-bottom: 0.18rem solid var(--olive);
                     transition: all 0.6s;
                 }

                 /* Border animation */
                 &::after {
                     content: '';
                     position: absolute;
                     width: 0;
                     height: 0.1rem;
                     left: 50%;
                     bottom: -0.1rem;
                     background-color: var(--olive);
                     transition: all 0.5s;
                 }

                 &:hover::after {
                     transition: all 0.14s;
                     width: 100%;
                     left: 0;
                 }
             }
         }

         .title,
         #subtitle,
         #lang-set {
             padding-left: 0;
         }

         #lang-set {
             width: 18.5rem;
         }
     }

     main {
         display: grid;
         grid-template-columns: 5vw 45vw 45vw 5vw;
         grid-template-areas:
             " accueil accueil accueil accueil "
             " . cabinet domaines . "
             " . engagement domaines . "
             " . honoraires domaines . "
             " . contact-title domaines . "
             " . form map-coord . ";

         hr {
             display: none;
         }

         .cookies {
             justify-self: center;
         }

         .accueil-section {
             grid-area: accueil;
             grid-template-columns: min(35rem, 45vw) min(35rem, 45vw);
             margin-block: 2rem;
             width: min(70rem, 90vw);
             margin-inline: auto;

             #accueil-title {
                 left: -2rem;

                 h2 {
                     font-size: 2.3rem;
                 }

                 .second-line {
                     padding-top: 1rem;
                 }
             }
         }

         .cabinet-section {
             grid-area: cabinet;
             width: min(45vw, 35rem);
             align-self: start;
             justify-self: end;

             h2,
             p {
                 padding-inline: 0 4rem;
             }

             p {
                 margin-bottom: 2rem;
             }

             .aj {
                 width: min(40vw, 31rem);
                 margin-left: 0;
             }

             .rdv-cont {
                 grid-area: rdv;
                 width: min(40vw, 31rem);
                 display: flex;
                 justify-content: center;
                 justify-self: end;
                 margin-left: 0;
                 margin-bottom: 3rem;
             }
         }

         .engagement-section {
             grid-area: engagement;
             width: min(45vw, 35rem);
             align-self: start;
             justify-self: end;
             margin-bottom: 2rem;

             h2,
             p {
                 padding-inline: 0 4rem;
             }
         }

         .honoraires-section {
             grid-area: honoraires;
             width: min(45vw, 35rem);
             align-self: start;
             justify-self: end;
             margin-bottom: 2rem;

             h2,
             p {
                 padding-inline: 0 4rem;
             }
         }

         .domaines-section {
             grid-area: domaines;
             align-self: start;
             width: min(45vw, 35rem);

             h2 {
                 padding-inline: 0 4rem;
             }

             .card {
                 width: min(45vw, 35rem);
             }
         }

         .contact-section {
             display: contents;

             .contact {
                 grid-area: contact-title;
                 padding-inline: 0;
                 width: min(45vw, 35rem);
                 justify-self: end;
             }

             .form {
                 grid-area: form;
                 width: min(45vw, 35rem);
                 padding-inline: 0 4rem;
                 justify-self: end;
                 padding-bottom: 0;

                 p {
                     padding-inline: 0;
                     text-align: center;
                 }
             }

             .map-coord {
                 grid-area: map-coord;
                 align-self: end;
                 width: min(45vw, 35rem);
                 display: flex;
                 flex-direction: column;
                 justify-content: space-evenly;

                 .coordonnees {
                     width: min(45vw, 35rem);
                     margin-bottom: 3rem;
                     display: flex;
                     justify-content: space-evenly;

                     #tel,
                     #adresse {
                         width: min(13rem, 18vw);
                     }
                 }

                 #iframe {
                     width: min(45vw, 35rem);
                 }

                 .symbols {
                     margin-bottom: 1rem;
                 }
             }
         }
     }
 }