total_1ère

src/scss/app.scss

@@ -7,6 +7,8 @@
 @import "base/colors";
 @import "base/fonts";
 @import "base/space";
+@import "base/fontawesome";
+@import "base/grille";
 
 
 
@@ -20,10 +22,12 @@
 @import "components/header_tunnel";
 @import "components/header_inscription";
 @import "components/savoirplus";
-@import "components/titrepage";
+@import "components/titres";
 @import "components/footer";
 @import "components/inputs";
 @import "components/check_mail";
+@import "components/_fin_inscription";
+@import "components/weasyprint";
 
 // Modules
 
@@ -33,4 +37,9 @@
 @import "templates/paiement";
 @import "templates/adhesion_end";
 @import "templates/stageformulaire";
+@import "templates/maj_manuelle";
+@import "templates/concert_annuel";
+@import "templates/admin";
+@import "templates/don_form";
+@import "templates/ventevideo";
 

src/scss/base/_colors.scss

@@ -22,6 +22,10 @@ $color_bleu_clair2: #525EBB;
 $color_bleu_fonce_1: #1B299A;
 $color_bleu_fonce_2: #101D77;
 
+$color_turquoise: #16BFB1;
+
+$color_green: #11a63d;
+
 // /////////////////////////////////
 // CSS COULEURS
 // /////////////////////////////////
@@ -29,7 +33,31 @@ $color_bleu_fonce_2: #101D77;
 .rouge {
     color: $color_rouge !important;
 }
+.turquoise {
+    color: $color_turquoise !important;
+}
+.color_gris_fonce {
+    color: $color_gris_fonce !important;
+}
+.color_green {
+    color: $color_green !important;
+}
+.bg_green_clair {
+    background-color: $color_green !important;
+}
 
 .bg_green {
     background-color: green !important;
+}
+
+.bg_rouge_tres_clair {
+    background-color: $color_rouge_tres_clair;
+}
+
+.border_green {
+    border: 0.15em solid $color_green !important;
+}
+
+mark {
+    background: $color_rouge_tres_clair !important;
 }

src/scss/base/_fontawesome.scss

@@ -0,0 +1 @@
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

src/scss/base/_fonts.scss

@@ -99,7 +99,7 @@ font-family: 'montserrat_semibolditalic';src: url('../fonts/montserrat_semiboldi
     font-family: 'montserrat_black';src: url('../fonts/montserrat_black.ttf') format('truetype');
 }
 @font-face {
-    font-family: 'montsermontserrat_extraboldrat_regular';src: url('../fonts/montserrat_extrabold.ttf') format('truetype');
+    font-family: 'montserrat_extrabold';src: url('../fonts/montserrat_extrabold.ttf') format('truetype');
 }
 @font-face {
     font-family: 'montserrat_extralightitalic';src: url('../fonts/montserrat_extralightitalic.ttf') format('truetype');
@@ -141,31 +141,47 @@ font-family: 'montserrat_semibolditalic';src: url('../fonts/montserrat_semiboldi
 
 @font-face {
     font-family: 'ubuntu_bold';src: url('../fonts/ubuntu_bold.ttf') format('truetype');
-  }
+}
   
-  @font-face {
+@font-face {
     font-family: 'ubuntu_courant';src: url('../fonts/ubuntu_courant.ttf') format('truetype');
-  }
+}
   
-  @font-face {
+@font-face {
     font-family: 'ubuntu_fin';src: url('../fonts/ubuntu_fin.ttf') format('truetype');
-  }
-  @font-face {
+}
+@font-face {
     font-family: 'ubuntu_fin_italic';src: url('../fonts/ubuntu_leger_italic.ttf') format('truetype');
-  }
+}
   
-  @font-face {
+@font-face {
     font-family: 'ubuntu_leger';src: url('../fonts/ubuntu_leger.ttf') format('truetype');
-  }
-  
-  @font-face {
+}
+
+@font-face {
     font-family: 'ubuntu_moyen';src: url('../fonts/ubuntu_moyen.ttf') format('truetype');
-  }
-  
-  @font-face {
+}
+
+@font-face {
     font-family: 'ubuntu_moyen_italique';src: url('../fonts/ubuntu-moyen_italique.ttf') format('truetype');
 }
 
 .gras {
-    font-family: cabin_bold;
+    font-family: cabin_bold !important;
+}
+.underline {
+    text-decoration: underline !important;
+}
+
+.montserrat_light {
+    font-family: montserrat_light;
+}
+.montserrat_regular {
+    font-family: montserrat_regular;
+}
+.montserrat_semibold {
+    font-family: montserrat_semibold;
+}
+.font-17 {
+    font-size: 17px !important;
 }

src/scss/base/_grille.scss

@@ -0,0 +1,3 @@
+.just_it_c {
+    justify-items: center;
+}

src/scss/base/_space.scss

@@ -4,7 +4,48 @@
 /* ***************************************** */
 /* ***************************************** */
 
-
+.float_right {
+    float: right;
+}
+.space20 {
+    height: 20px;
+}
 .space30 {
     height: 30px;
+}
+.space40 {
+    height: 40px;
+}
+.space60 {
+    height: 60px;
+}
+.space80 {
+    height: 80px;
+}
+
+.margintop_-20px {
+    margin-top: -20px !important;
+}
+.marginbottom_-20px {
+    margin-bottom: -20px !important;
+}
+
+.margintop_40px {
+    margin-top: 40px;
+}
+
+.marginbottom_40px {
+    margin-bottom: 40px;
+}
+
+.margintop_60px {
+    margin-top: 60px;
+}
+
+.marginleft_27px {
+    margin-left: 27px;
+}
+
+.paddingbottom_5px {
+    padding-bottom: 5px;
 }

src/scss/components/_check_mail.scss

@@ -5,6 +5,7 @@
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 70px;
+    color: $color_rouge;
     @include media_max(phone){
         margin-left: 10px;
         margin-right: 10px;
@@ -27,10 +28,11 @@
 .form_check_mail {
     display: grid;
     grid-template-columns: 2fr 1fr 2fr;
-    grid-template-rows: auto auto auto;
+    grid-template-rows: auto auto auto auto;
     grid-template-areas: 
     ". input ."
     ". checkbox checkbox"
+    ". input_code ."
     ". button .";
     
     .input_email {
@@ -47,6 +49,10 @@
             color: $color_noir;
         }
     }
+    .input_code {
+        grid-area: input_code;
+        margin-bottom: 40px;
+    }
     button {
         grid-area: button;
         justify-self: center;

src/scss/components/_fin_inscription.scss

@@ -0,0 +1,4 @@
+.flex_centre {
+    align-items: center !important;
+    justify-content: center;
+}

src/scss/components/_inputs.scss

@@ -23,8 +23,8 @@
     }
 
     input[type=email] {
-        padding-top: 19px;
-        padding-bottom: 16px;
+        //padding-top: 19px;
+        //padding-bottom: 16px;
         padding-left: 16px;
         padding-right: 13px;
         background-color: $color_blanc;
@@ -118,6 +118,23 @@
         border: 1.8px solid $color_bleu_fonce_1;
     }
 }
+.input_box_rouge {
+    label {
+        color: $color_rouge;
+    }
+    input,input[type=text],input[type=tel],input[type=date], select, textarea {
+        border: 1.8px solid $color_rouge;
+    }
+}
+
+.input_box_green {
+    label {
+        color: $color_green;
+    }
+    input,input[type=text],input[type=tel],input[type=date], select, textarea {
+        border: 1.8px solid $color_green;
+    }
+}
 
 
 /* FORMAT DU CONTENUE DU CHAMP DE SAISIE */
@@ -199,6 +216,7 @@
         }
     }
     input,input[type=text],input[type=tel],input[type=date], select, textarea {
+        // appearance: initial;
         font-family: cabin_regular;
         font-size: 14px;
         @include media_max(phone){
@@ -216,6 +234,12 @@
     }
 }
 
+.uppercase {
+    text-transform: uppercase;
+}
+.capitalize {
+    text-transform: capitalize;
+}
 
 /* ***************************************** */
 /* ***************************************** */
@@ -223,6 +247,7 @@
 /* ***************************************** */
 /* ***************************************** */
 
+// ROUGE
 .input_checkbox {
     //max-width: 300px;
 
@@ -249,6 +274,32 @@
       }
 }
 
+// NOIR
+.input_checkbox_bleu {
+
+    input[type="checkbox"] {
+        
+        border: 0.15em solid $color_bleu !important;
+        &:checked {
+            background-color: $color_bleu !important;
+        }
+        
+      }
+}
+
+.input_checkbox_green {
+
+    input[type="checkbox"] {
+        
+        border: 0.15em solid $color_green !important;
+        &:checked {
+            background-color: $color_green !important;
+        }
+        
+      }
+}
+
+
 /* ***************************************** */
 /* ***************************************** */
 /* BUTTONS                                     */
@@ -300,3 +351,9 @@
     }
 
 }
+
+
+.text_listeatt{
+    font-size: 12px;
+    text-decoration: underline;
+}

src/scss/components/_savoirplus.scss

@@ -55,6 +55,25 @@
     @include media_max(phone){
         width: 95%;
     }
+    margin-top: 90px;
+    margin-right: auto;
+    margin-left: auto;
+
+    .savoirplus_button {
+        text-align: center;
+        text-decoration: underline;
+        &:hover {
+            cursor: pointer;
+        }
+    }
+}
+
+.savoirplus_stage_accueil{
+
+    max-width: 550px;
+    @include media_max(phone){
+        width: 95%;
+    }
     margin-top: 150px;
     margin-right: auto;
     margin-left: auto;
@@ -69,7 +88,7 @@
 }
 
 .savoirplus_stage {
-    width: 80%;
+    max-width: 550px;
     @include media_max(phone){
         width: 95%;
     }
@@ -77,5 +96,7 @@
     margin-bottom: 48px;
     margin-right: auto;
     margin-left: auto;
-
-}
+    p {
+        font-size: 14px;
+    }
+}

src/scss/components/_titres.scss

@@ -8,7 +8,7 @@
         margin-right: 20px;
     }
 
-    margin-bottom: 100px;
+    margin-bottom: 60px;
     
     h1 {
         margin-bottom: 9px;
@@ -27,3 +27,39 @@
         }
     }
 }
+
+.sous_titre {
+    display: flex;
+    column-gap: 25px;
+    align-items: center;
+    justify-content: flex-start;
+    
+    margin-bottom: 20px;
+
+    img {
+        max-height: 90px;
+        min-height: 45px;
+    }
+    p {
+        font-size: 18px;
+    }
+}
+
+.sous_titre_centre {
+    justify-content: center !important;
+}
+
+.textcenter {
+    text-align: center;
+}
+
+.note {
+    font-family: montserrat_light;
+    font-size: 15px !important;
+    color: $color_rouge;
+    li {
+        &:before {
+            content: '- ';
+        }
+    }
+}

src/scss/components/_weasyprint.scss

@@ -0,0 +1,68 @@
+@page {
+    font-family: montserrat_regular;
+    margin: 1cm;
+}
+
+.weasyprint {
+    //background-color: rgba(0, 255, 255, 0.593);
+    color: #14213d;
+    font-family: montserrat_regular;
+    font-size: 10pt;
+
+    .logo {
+        max-width: 300px;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    article {
+        //background-color: rgba(255, 0, 204, 0.593);
+        margin-left: 30px;
+        margin-right: 30px;
+        
+
+        .header_wp {
+            display: flex;
+            justify-content: flex-end;
+            .header {
+                width: 50%;
+                .date {
+                    //background-color: rgba(0, 255, 64, 0.593);
+                    display: flex;
+                    justify-content: flex-start;
+                }
+        
+                .afps {
+                    //background-color: rgba(0, 255, 64, 0.593);
+                    display: flex;
+                    justify-content: flex-start;
+                }
+            }
+
+    
+        }
+        .content {
+            //background-color: rgba(255, 174, 0, 0.593);
+            margin-left: 30px;
+            h1 {
+                color: $color_rouge;
+                font-family: montserrat_bold;
+                font-size: 20px;
+                text-transform: uppercase;
+            }
+            p {
+                margin-bottom: 5px;
+                .label {
+                    color: $color_gris_fonce;
+                }
+            }
+        }
+
+    
+
+    }
+
+
+
+  
+}

src/scss/global/_mediaqueries.scss

@@ -4,18 +4,22 @@ $breakpoints: (
     "desktop": 1200px
 );
 
+// à partir de cette taille
 @mixin media_min($key) {
     @media (min-width: map-get($breakpoints,$key)) {
         &{ @content; }
     }
 }
 
+// jusqu'à cette taille
 @mixin media_max($key) {
     @media (max-width: map-get($breakpoints,$key)) {
         &{ @content; }
     }
 }
 
+// Entre minumum et maximum
+// media_minmax("phone","desktop") = tablette
 @mixin media_minmax($key_min, $key_max) {
     @media (min-width: map-get($breakpoints,$key_min)) and (max-width: map-get($breakpoints,$key_max)) {
         &{ @content; }

src/scss/templates/_adhesion.scss

@@ -20,6 +20,11 @@
         color: $color_bleu_fonce_2;
     }
 
+    .explication_pleine_page {
+        margin-bottom: 38px;
+        color: $color_bleu_fonce_2;
+    }
+
     .ajout_ecole_button {
         margin-top: -35px;
         margin-bottom: 30px;
@@ -30,6 +35,11 @@
             cursor: pointer;
         }
     }
+
+    h2 {
+        margin-bottom: 40px;
+        font-size: 16px;
+    }
 }
 
 .grid_3inputs {
@@ -59,6 +69,17 @@
     //margin-bottom: 50px; mdifie le 14 janvier 2023
     margin-bottom: 35px;
 }
+.grid_1inputs {
+    display: grid;
+    grid-template-columns: minmax(auto,550px);
+    @include media_max(phone){
+        grid-template-columns: minmax(auto,350px);
+    }
+    grid-template-rows: auto;
+    row-gap: 30px;
+    //margin-bottom: 50px; mdifie le 14 janvier 2023
+    margin-bottom: 35px;
+}
 
 .paiement_explication {
         max-width: 500px;

src/scss/templates/_adhesion_end.scss

@@ -135,7 +135,7 @@
                     li {
                         &:before {
                             content: '- ';
-                         }
+                        }
                     }
                 }
             }    
@@ -146,6 +146,16 @@
             }   
         }
 
+        .adhesion_fin_resultat {
+            margin-top: 100px;
+            font-family: montserrat_regular;
+            li {
+                &:before {
+                    content: '- ';
+                }
+            }
+        }
+
     }
 
 

src/scss/templates/_adhesion_mail.scss

@@ -10,3 +10,9 @@
 /* **************************************************************** */
 /* ** OUVRIR EN SAVOIR PLUS  ** */
 /* **************************************************************** */
+
+.message_fin {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}

src/scss/templates/_admin.scss

@@ -0,0 +1,13 @@
+aside {
+    margin-top: 30px;
+    margin-bottom: 30px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    h1 {
+        margin-bottom: 10px;
+    }
+    li {
+        margin-bottom: 3px;
+    }
+}

src/scss/templates/_concert_annuel.scss

@@ -0,0 +1,44 @@
+// /////////////////////////////////
+// POUR LE FORMAT DES PAGES DU CONCERT
+// /////////////////////////////////
+
+
+.place_categorie {
+    background-color: #e7305821;
+    padding-top: 20px;
+    padding-bottom: 1px;
+    padding-left: 20px;
+    border-radius: 10px;
+    margin-bottom: 29px;
+
+    @include media_min("phone"){
+        margin-left: -20px;
+        margin-right: -20px;
+    }
+    
+}
+
+.grid {
+    display: grid;
+    justify-content: center;
+}
+
+.alignself_center {
+    align-self: center;
+}
+
+.maxwidth_600 {
+    max-width: 600px;
+}
+
+table {
+    table-layout: auto;
+    width: max-content;
+    td {
+        padding-right: 10px;
+        padding-bottom: 5px;
+    }
+    .align_right {
+        text-align: right;
+    }
+}

src/scss/templates/_don_form.scss

@@ -0,0 +1,58 @@
+.form_don {
+    display: grid;
+    grid-template-columns: 2fr 1fr 2fr;
+    grid-template-rows: auto auto auto;
+    grid-template-areas:
+    ". h2 ."
+    ". formulaire ."
+    ". checkbox checkbox"
+    ". button .";
+    
+    h2 {
+        grid-area: h2;
+
+        margin-bottom: 40px;
+
+        font-family: cabin_regular;
+        color: $color_gris_fonce;
+        font-size: 18px;
+    }
+    .formulaire {
+        grid-area: formulaire;
+    }
+    .input_checkbox {
+        grid-area: checkbox;
+        margin-top: 5px;
+        margin-left: 5px;
+        margin-bottom: 35px;
+        .gras {
+            font-family: cabin_semibold;
+            color: $color_noir;
+        }
+    }
+    button {
+        grid-area: button;
+        justify-self: center;
+    }
+
+    .form_sous_titre {
+        margin-top: 40px;
+        margin-bottom: 35px;
+    }
+
+    .input_box {
+        margin-bottom: 30px;
+    }
+
+    .commentaire {
+        margin-top: 80px;
+    }
+
+    .currency {
+        position: absolute;
+        top: 14px;
+        right: 25px;
+        padding-right: 5px;
+    }
+
+}

src/scss/templates/_maj_manuelle.scss

@@ -0,0 +1,56 @@
+// /////////////////////////////////
+// MISE À JOUR DES BD ou GSHEET MANUELLEMENT
+// MODULE CONCERT ANNUEL
+// /////////////////////////////////
+
+// ARTICLE
+.maj_manuelle {
+    display: grid;
+    justify-content: center;
+
+    
+
+    padding-top: 40px;
+    padding-bottom: 30px;
+
+    @include media_min("phone"){
+        margin-left: 30px;
+        margin-right: 30px;
+    }
+    @include media_max("phone"){
+        margin-left: 11px;
+        margin-right: 10px;
+    }
+    .buttons {
+        display: flex;
+        align-items: center;
+        margin-top: 30px;
+    }
+
+    // AFFICHAGE DES RÉSULTATS DES REQUÊTES
+    .resultat_list {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-bottom: 20px;
+        justify-content: center;
+
+        margin-top: 38px;
+        
+        .resultat {
+            margin-bottom: 10px;
+            font-family: montserrat_extralight;
+            .plugras {
+                font-family: montserrat_regular;
+            }
+            .resultat_text {
+                padding-left: 5px;
+                font-family: montserrat_regular;
+            }
+        }
+    }
+
+}
+
+
+

src/scss/templates/_stageformulaire.scss

@@ -1,12 +1,9 @@
 .stage_formulaire_cont {
-    //max-width: 1000px;
-    //margin-right: auto;
-    //margin-left: auto;
+
 
     .stage_formulaire {
         display: flex;
         flex-direction: column;
-        align-items: center;
     }
 
     h1 {
@@ -16,15 +13,27 @@
             margin-bottom: -13px;
             margin-right: 19px;
         }
+        font-size: 18px;
         @include media_max("phone"){
-            font-size: 16px;
+            font-size: 14px;
         }
     }
     .titre_personne {
-        margin-top: 50px;
+        
+        @include media_min("desktop"){
+            margin-top: 30px;
+        }
+
+        @include media_minmax("phone","desktop"){
+            margin-top: 50px;
+        }
+
+        @include media_max("phone"){
+            margin-top: 10px;
+        }
     }
     h2 {
-        margin-bottom: 47px;
+        margin-bottom: 30px;
         font-size: 16px;
         .icone_titre {
             width: 42px;
@@ -67,13 +76,24 @@
             margin-right: 15px;
         }
     }
+    .icone_bus {
+        display: flex;
+        align-items: end;
+        flex-wrap: wrap;
+        column-gap: 2px;
+        row-gap: 20px;
+        .icone {
+            width: 45px;
+            margin-right: 15px;
+        }
+        margin-top: 30px;
+    }
 
     .personne {
         margin-bottom: 45px;
     }
 
     .commentaire {
-        //align-self: flex-start;
         margin-top: 130px;
         .textarea_commentaire {
             padding-top: 26px;
@@ -86,24 +106,41 @@
 
     .recap_personne {
         margin-top: 40px;
-    }
-
-    .recap_personne, .tarifs {
         p{
             margin-left: 27px;
             margin-bottom: 5px;
             font-size: 14px;
-        }
+        };
     }
 
+    .tarifs {
+        p{
+            margin-left: 27px;
+            margin-bottom: 5px;
+            font-size: 14px;
+        };
+    }
+    .tarifs_ss_margel {
+        margin-bottom: 20px;
+        p{
+            margin-bottom: 5px;
+            font-size: 14px;
+        };
+    }
+    .tarif_unitaire {
+        p{
+            font-family: sourceserifpro_light;
+        };
+    }
 
     .buttons {
         display: flex;
+        flex-direction: column;
         flex-wrap: wrap;
         column-gap: 20px;
         row-gap: 20px;
-        justify-content: center;
-        margin-top: 30px;
+        align-items: center;
+        //margin-top: 30px;
         .button_icone_recap {
             width: 206px !important;
         }
@@ -121,7 +158,7 @@
 
     .description {
         margin-top: 30px;
-        margin-bottom: 60px;
+        //margin-bottom: 60px;
         background-color: #fefefe;
         padding: 20px;
         border: 5px solid #E73058;

src/scss/templates/_ventevideo copie.scss

@@ -0,0 +1,50 @@
+.ventevideo {
+    .page_header {
+        display: flex;
+        flex-direction: column;
+        .illustration {
+            margin-left: auto;
+            margin-right: auto;
+            img {
+                max-width: 1000px;
+            }
+        }
+        .titre {
+            margin-bottom: 20px !important;
+            h1 {
+                font-family: montserrat_semibold !important;
+            }
+            
+        }
+        mark {
+            padding-left: 3px;
+            padding-right: 3px;
+        }
+    }
+    .explication_wp {
+        margin-left: 10vh;
+            margin-right: 10vh;
+    
+            display: flex;
+            justify-content: center;
+        .explication {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: flex-start;
+            column-gap: 20px;
+            row-gap: 20px;
+    
+            font-family: montserrat_light;
+    
+            h2 {
+                font-family: montserrat_semibold;
+                font-size: 18px;
+            }
+            .explication_item {
+                min-width: 300px;
+                max-width: 400px;
+            }
+        }
+    }
+
+}

src/scss/templates/_ventevideo.scss

@@ -0,0 +1,59 @@
+.ventevideo {
+    .page_header {
+        display: flex;
+        flex-direction: column;
+        .illustration {
+            margin-left: auto;
+            margin-right: auto;
+            max-width: 1000px;
+            img {
+                width: 100%; /* Remplit la largeur du conteneur */
+                height: auto; /* Ajuste automatiquement la hauteur */
+                object-fit: contain; /* Assure que l'image reste visible en entier, sans être rognée */
+            }
+        }
+        .titre {
+            margin-bottom: 20px !important;
+            h1 {
+                font-family: montserrat_semibold !important;
+            }
+            
+        }
+        mark {
+            padding-left: 3px;
+            padding-right: 3px;
+        }
+    }
+    .explication_wp {
+        margin-left: 10vh;
+        margin-right: 10vh;
+        display: flex;
+        justify-content: center; /* Centrer le contenu horizontalement */
+        box-sizing: border-box;
+    }
+    
+    .explication {
+        display: grid; /* Utilisation de la grille */
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Colonnes dynamiques */
+        gap: 20px; /* Espacement entre les éléments */
+        max-width: 1200px; /* Largeur maximale de la grille */
+        width: 100%; /* Prendre toute la largeur disponible */
+        justify-content: center; /* Centrer les items dans la grille */
+    }
+    
+    .explication_item {
+        h2 {
+            padding-bottom: 5px;
+            font-family: montserrat_semibold !important;
+            font-size: 16px !important;
+        }
+        min-width: 300px; /* Largeur minimale */
+        max-width: 400px; /* Largeur maximale */
+        background-color: #f8f8f8; /* Couleur de fond (optionnel) */
+        padding: 20px; /* Espacement interne */
+        border-radius: 5px; /* Coins arrondis */
+        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1); /* Ombre (optionnel) */
+        box-sizing: border-box; /* Inclure le padding dans la largeur totale */
+    }
+
+}