@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

 :root {
     --color-1: #002F5C;
 }

 body {
     margin: 0;
 }

 .mobile-v {
     display: none;
 }

 section {
     display: flex;
     align-items: center;
     width: 100%;
     box-sizing: border-box;
     margin: 100px auto;
     position: relative;
     justify-content: center;
 }


 /* GLOBAL CLASSES */
 h2 {
     font-size: 2.3rem;
     font-weight: 600;
     font-family: "Inter", Arial, sans-serif;
 }

 p {
     font-size: 1rem;
     opacity: .9;
     line-height: 1.6rem;
     font-family: "Inter", Arial, sans-serif;
     font-weight: 300;
 }

 a {
     color: var(--color-1);
 }

 .row {
     display: flex;
     flex-direction: row;
     gap: 1rem;
 }

 .col {
     display: flex;
     flex-direction: column;
     gap: 1rem;
 }

 .row.center,
 .col.center {
     align-items: center;
 }

 .row.left,
 .col.left {
     align-items: flex-start;
 }

 .btn_1,
 .btn_2 {
     background-color: var(--color-1);
     border-radius: 15px;
     border: none;
     color: white;
     padding: 10px 20px;
     font-size: 1.2rem;
     font-weight: 500;
     border: transparent 2px solid;
     cursor: pointer;
 }

 .btn_2 {
     background-color: transparent;
     border-color: var(--color-1);
     color: var(--color-1);
 }

 .btn_1:hover,
 .btn_2:hover {
     opacity: .8;
 }



 /* SECTION FRONT */
 #front {
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 #front h1,
 #front h3 {
     font-family: "Inter", Arial, sans-serif;
     font-size: 2.5rem;
     text-align: center;
     font-weight: 700;
     margin: 1rem 0;
 }

 #front h3 {
     font-size: 1.8rem;
     font-weight: 300;
     margin: 0;
 }

 #front .cover {
     max-width: 800px;
     width: 90%;
     height: fit-content;
     margin: 3rem auto;
 }

 #front .cover img {
     width: 100%;
     height: auto;
     border-radius: 20px;
 }


 /* definition-panneaux-sandwich */
 #definition-panneaux-sandwich {}

 #definition-panneaux-sandwich>.row {
     gap: 5rem;
     max-width: 1000px;
     align-items: center;
 }

 #definition-panneaux-sandwich>.row>* {
     flex: 1;
 }

 #definition-panneaux-sandwich .picture {
     max-width: 600px;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;

     filter: drop-shadow(0px 4px 18px rgba(0, 0, 0, 0.07));
     border-radius: 20px;
     overflow: hidden;
 }

 #definition-panneaux-sandwich .picture img {
     width: 100%;
 }



 /* choix-panneaux-sandwich */
 #choix-panneaux-sandwich {
     background-color: var(--color-1);
     min-height: 700px;
     color: white;
 }

 #choix-panneaux-sandwich>.row {
     gap: 5rem;
     max-width: 1000px;
     align-items: center;
 }

 #choix-panneaux-sandwich .picture {
     display: flex;
     position: relative;
     max-width: 800px;
     min-width: 25vw;
     overflow: hidden;
     border-radius: 15px;
 }

 #choix-panneaux-sandwich .picture img {
     width: 100%;
 }

 #choix-panneaux-sandwich .col {
     padding-bottom: 200px;
     box-sizing: border-box;
 }

 #estimation-commande {
     padding: 200px 0;
     flex-direction: column;
     text-align: center;
 }

 #estimation-commande>.col {
     max-width: 850px;
     gap: 0;
 }

 #estimation-commande .col.preview {
     position: relative;
 }

 #estimation-commande .col.preview::after {
     background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 48.08%, rgba(255, 255, 255, 0.7) 66.83%, #FFFFFF 100%);
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
 }

 #estimation-commande .col.preview img {
     position: relative;
     width: 100%;
 }

 #estimation-commande .col.preview .row {
     position: absolute;
     bottom: 0;
     z-index: 1;
 }

 /* faq */
 #faq {
     text-align: center;
 }

 #faq .col {
     max-width: 800px;
     align-items: center;
 }


 /* conclusion */
 #conclusion {
     padding: 4rem;
     box-sizing: border-box;
 }

 #conclusion>.row {
     background-color: var(--color-1);
     color: white;
     border-radius: 30px;
     padding: 4rem;
 }

 #conclusion h2 {
     margin: 0;
 }

 #conclusion .row>.col {
     flex: 1;
 }

 #conclusion img.logo {
     height: 4rem;
 }

 #conclusion .picture img {
     width: 100%;
     border-radius: 30px;
 }

 #conclusion .btn_1 {
     background-color: #fff;
     color: var(--color-1);
 }


 /* FAQ */

 section#faq #insert_panneaux_sandwich_faq {
     margin-top: 20px;
     display: flex;
     flex-direction: column;
     align-items: stretch;
     gap: 10px;
     width: 750px;
     max-width: 80vw;
     font-family: 'Inter', sans-serif;
     text-align: left;
 }

 section#faq .faq-item {
     background-color: rgb(240, 243, 255);
     padding: 1rem 1.5rem;
     border-radius: 20px;
     box-sizing: border-box;
 }

 section#faq .faq-question {
     font-weight: bold;
     cursor: pointer;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 section#faq .faq-item:hover {
     background-color: rgba(240, 243, 255, .6);
 }

 section#faq .faq-answer {
     padding: 8px 0 0 0;
     color: #444;
 }

 section#faq .arrow {
     font-size: 1.5rem;
     font-family: sans-serif !important;
     color: #666;
     font-weight: 600;
     width: 1.5rem;
     text-align: center;
 }






 /* ANIMATIONS =========== */
 .shake-v {
     animation: shake-vertical 30s infinite ease-in-out 0s normal forwards;
 }

 @keyframes shake-vertical {

     0%,
     100% {
         transform: translateY(0);
     }

     10%,
     30%,
     50%,
     70%,
     80% {
         transform: translateY(0px);
     }

     20%,
     40%,
     60%,
     90% {
         transform: translateY(-16px) scale(1.03);
     }
 }







 /* MOBILE VERSION ========================== */
 @media (max-width: 768px) {
     .pc-v {
         display: none;
     }

     .mobile-v {
         display: flex;
     }



     h2 {
         font-size: 1.6rem;
     }

     /* #definition-panneaux-sandwich ============ */
     #definition-panneaux-sandwich>.row {
         flex-direction: column;
         text-align: center;
         max-width: 90vw;
     }


     /* #choix-panneaux-sandwich ============ */
     #choix-panneaux-sandwich .mobile-v {
         flex-direction: column;
         display: flex;

     }

     #choix-panneaux-sandwich .mobile-v .col {
         text-align: center;
         padding: 2rem 1rem;
         align-items: center;
     }

     #choix-panneaux-sandwich .mobile-v img {
         width: 100%;
         max-width: 300px;
         border-radius: 15px;
         margin: 2rem 0;
     }

     /* #estimation-commande =============== */
     #estimation-commande {
         padding: 0 1rem;
     }

     #estimation-commande .col.preview {
         padding: 2rem 0;
     }

     /* #faq =================== */
     #faq >.col>p{
        padding: 2rem;
        box-sizing: border-box;
        font-size: 14px;
     }

     /* #conclusion ==================== */
     #conclusion {
         padding: 4rem .5rem;
     }

     #conclusion>.row {
         box-sizing: border-box;
         padding: 4rem 2rem;
         flex-direction: column;
     }

     #conclusion .col.left {
         align-items: center;
         text-align: center;
     }

     #conclusion img.logo {
         height: unset;
         width: 60vw;
     }

     #conclusion .small-title {
         text-align: center;
         text-transform: uppercase;
         letter-spacing: 4px;
         font-size: 12px;
     }

     #conclusion .row.left {
         flex-direction: column;
         align-items: stretch;
         width: 100%;
     }
 }