/*@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:wght@500&display=swap');*/ /* Les élément html : boutons, checkboxes, radio, textareaa etc... */ .jconfirm.jconfirm-open {z-index: 99999;} /*html{margin-top:0px !important;--wp-admin--admin-bar--height:0px;}*/ .mur .jr_articles.cache, .jr_articles_colonne.mur .jr_articles.cache, .jr_articles_colonne.mur.incrustation .jr_articles.cache {display:none;} i.fas, i.fa {padding-right: 5px;} .centrer {text-align:center;} .droite {text-align:right;} .largeur_100{width:100%;} /*:root{--largeur_ecran:1920px; --hauteur_ecran:1080px; --largeur_fen:1920px; --hauteur_fen:1080px;--couleur_infos:#00B38F;}*/ /*.jr_galerie[data-visible="1"] .jr_popup {position: fixed; top: 0px; left: 0px; z-index: 1000; overflow: auto; background-color: #FFFFFF; font-size: 1.0em; height:100%;width: 100%;}*/ .jr_galerie .jr_popup {position: fixed; top: 0px; left: 0px; z-index: 1000; overflow: auto; background-color: rgb(250, 250, 250, 0.97); font-size: 1.0em; height: 100%; width: 100%;padding-top:var(--hauteur_menu_admin);} .jr_galerie .colonne_droite, .jr_galerie .colonne_gauche {max-width: 400px; margin-left: 20px;} .jr_galerie .ecran_mobile.colonne_droite, .jr_galerie .ecran_mobile.colonne_gauche {max-width: 360px; margin-left: 0px;} .jr_galerie .jr_articles_colonne, .jr_galerie .ecran_mobile.jr_articles_colonne { width: 100%;} .jr_galerie .largeur_colonne_articles { width: calc(100% - var(--larg_colonne_gauche) - var(--larg_colonne_droite));} .jr_galerie.jr_concours {background: rgb(255, 255, 255, 1);} /* Fond transparent*/ .jr_galerie.jr_photos {display:flex;flex-wrap: wrap;} .jr_galerie.jr_photos .jr_articles {flex-grow:10;} .jr_galerie.jr_photos .entete_article{width:100%} .jr_galerie .page_en_cours {text-align: center; width: 100%;} .incrustation.badge .incrustation_grille .grille div {text-transform: none; margin: 0; margin-top: -3px; display: inline-block; padding: 6px 12px; border-radius: 50px; font-weight: 500; line-height: 1;background-color: var(--jr_couleur_badge_fond); color:var(--jr_couleur_badge);} .incrustation.badge .incrustation_grille .grille div.titre {background-color: #f0f8ff00;} /* jr_theme */ .jr_categories .carte .jr_articles .galerie_item { display: flex;} .entete_popup {margin-top: 25px; display: flex;} .entete_popup .moins {width: 50px;cursor: pointer;} .entete_popup .titre {width: 100%; text-align: center;} /*.titre {font-family: "Bebas Neue", cursive; font-size: 1.5rem; letter-spacing: 0.05em; color: var(--jr_couleur_texte);}*/ .galerie_item {break-inside: avoid;box-shadow: 2px 5px 10px rgb(0 0 0 / 30%); border-radius: 10px; position:relative;text-align:center;overflow: hidden;} /* note par etoile */ .etoiles .checked {color: #ffb300;} .etoiles {color: #e1deb9;} .etoiles :hover { color: #fd9e39;} /*.stars {display: block; margin: 10px;} .stars i{font-size: 19px;color:#e1deb9;}*/ /*.stars > i:hover:before, .stars > i:hover ~ i:before { color: gold; cursor: pointer;}*/ /*.stars i.checked { color: gold;} .stars i.over { color: #fd9e39;}*/ /*.etoiles .checked {color: #ffb300;} .galerie_item .fa-heart, .check_icone .fa-heart {color: #e91919;} .galerie_item .fa-square, .galerie_item .fa-square-check, .galerie_item .fa-flag, .check_icone .fa-square, .check_icone .fa-square-check, .check_icone .fa-flag {color: #1fc91f;}*/ /* fin note par etoile */ .largeur_90{width: 90%;} .largeur_80{width: 80%;} .largeur_70{width: 70%;} .largeur_60{width: 60%;} .largeur_50{width: 50%;} input:is([type=text]).largeur_100_icone {width: calc(100% - 60px); margin-left: 10px;} .jr_articles .galerie_item { background: var(--jr_couleur_fond_boite); color: var(--jr_couleur_texte); box-shadow: 0 3px 15px rgba(51, 51, 51, 0.2); border-radius: 10px; transition: 0.2s ease;} .jr_articles .galerie_item i {display:inline;padding-right: 5px;} .rond .jr_articles .image img {border-radius: 50%;border: 7px solid var(--jr_couleur_bordure);} .nb .jr_articles .image img {filter: grayscale(100%);} .nb .jr_articles .image:hover img {filter: grayscale(0);} /* fin Les élément html : boutons, checkboxes, radio, textareaa etc... */ /* Pour toutes les présentations ou l'image est seule */ .image_seule .jr_articles .galerie_item img {border: none;} /* fin Pour toutes les présentations ou l'image est seule */ /* Gestion du mode d'affichage : photos en colonnes ou mur */ /*.photos_colonnes .jr_articles{display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); grid-auto-flow: dense; padding: 10px; color: #fff;} .photos_colonnes .jr_articles .galerie_item { position: relative; overflow: hidden; grid-template-areas:"image";} .photos_colonnes img {place-self: stretch; object-fit: cover;object-position: center; margin: 5px; background: #fff; border: 1px solid #ddd;padding: 10px; color: #fff; grid-row: span 3; grid-column: span 3;} .photos_colonnes .format_1x3 { grid-row: span 6; grid-column: span 2;} .photos_colonnes .format_2x3 { grid-row: span 5; } .photos_colonnes .format_1x1 { grid-row: span 3; grid-column: span 3; aspect-ratio: 1 / 1; } .photos_colonnes .format_3x2 { grid-row: span 2;} .photos_colonnes .format_3x1 { grid-row: span 1;} .photos_colonnes .format_4x1 { grid-row: span 1;} .photos_mur .jr_articles{display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-auto-flow: dense; padding: 10px; color: #fff;} .photos_mur .jr_articles .galerie_item { position: relative; overflow: hidden; grid-template-areas:"image";} .photos_mur img {place-self: stretch; object-fit: cover;object-position: center; margin: 5px; background: #fff; border: 1px solid #ddd;padding: 10px; color: #fff; grid-row: span 1; grid-column: span 1;} .photos_mur .format_1x3 { grid-row: span 3; } .photos_mur .format_2x3 { grid-row: span 2; } .photos_mur .format_1x1 { grid-row: span 2; grid-column: span 2; aspect-ratio: 1 / 1; } .photos_mur .format_3x2 { grid-column: span 2;} .photos_mur .format_3x1 { grid-column: span 3;} .photos_mur .format_4x1 { grid-column: span 4;} .fit-left { object-position: left;} .fit-right { object-position: right;} */ /* fin Gestion du mode d'affichage : photos en colonnes ou mur */ /* Gestion du mode d'affichage : slider */ .slider .jr_articles {display: block; position: relative;} .slider .jr_articles .galerie_item { position: relative; overflow: hidden; height: 200px; grid-template-areas:"image";} .slider .jr_articles .galerie_item img {border-bottom: none;} .slider .jr_articles .btn_precedent{position: absolute; top: calc(50% - 40px); left: 10px;} .slider .jr_articles .btn_suivant{position: absolute; top: calc(50% - 40px); right: 10px;} .slider .jr_articles .indicateurs_points { position: absolute; left: 0; bottom: 10px; width: 100%;} .slider .jr_articles .indicateurs_points i:hover{ color:black;} .slider .jr_articles .indicateurs_points i.actif{ color:black;} /* Fin Gestion du mode d'affichage : slider */ /* Gestion du mode d'affichage : justifie */ /*.jr_articles.justifie.hauteur_75 .galerie_item {height:75px;} .jr_articles.justifie.hauteur_100 .galerie_item {height:100px;} .jr_articles.justifie.hauteur_150 .galerie_item {height:150px;} .jr_articles.justifie.hauteur_200 .galerie_item {height:200px;} .jr_articles.justifie.hauteur_250 .galerie_item {height:250px;} .jr_articles.justifie.hauteur_300 .galerie_item {height:300px;} .jr_articles.justifie.hauteur_350 .galerie_item {height:350px;} .jr_articles.justifie.hauteur_400 .galerie_item {height:400px;} .jr_articles.justifie.hauteur_450 .galerie_item {height:450px;} .jr_articles.justifie.hauteur_500 .galerie_item {height:500px;} .jr_articles.justifie.carre.hauteur_75 .galerie_item {height:75px; width:75px;} .jr_articles.justifie.carre.hauteur_100 .galerie_item {height:100px; width:100px;} .jr_articles.justifie.carre.hauteur_150 .galerie_item {height:150px; width:150px;} .jr_articles.justifie.carre.hauteur_200 .galerie_item {height:200px; width:200px;} .jr_articles.justifie.carre.hauteur_250 .galerie_item {height:250px; width:250px;} .jr_articles.justifie.carre.hauteur_300 .galerie_item {height:300px; width:300px;} .jr_articles.justifie.carre.hauteur_350 .galerie_item {height:350px; width:350px;} .jr_articles.justifie.carre.hauteur_400 .galerie_item {height:400px; width:400px;} .jr_articles.justifie.carre.hauteur_450 .galerie_item {height:450px; width:450px;} .jr_articles.justifie.carre.hauteur_500 .galerie_item {height:500px; width:500px;} */ .justifie .jr_articles {display: flex; justify-content: space-between; align-items: normal; flex-wrap: wrap; gap: 10px;} .justifie .jr_articles:after {content: ''; flex-grow: 99999999;} /*.jr_articles.justifie.espace_5{gap: 5px;} .jr_articles.justifie.espace_10{gap: 10px;} .jr_articles.justifie.espace_15{gap: 15px;} .jr_articles.justifie.espace_20{gap: 20px;} .jr_articles.justifie.espace_25{gap: 25px;} .jr_articles.justifie.espace_30{gap: 30px;} .jr_articles.justifie.espace_35{gap: 35px;} .jr_articles.justifie.espace_40{gap: 40px;} */ .justifie .jr_articles .galerie_item { position: relative; overflow: hidden; height: 200px; grid-template-areas:"image";} .justifie .jr_articles .galerie_item img {border-bottom: none; object-fit: cover;} /*.jr_articles.justifie .galerie_item .titre {display: none;} // a enlever .jr_articles.justifie .galerie_item .legende {display:none;} // a enlever .jr_articles.justifie .galerie_item .auteur {display:none} // a enlever .jr_articles.justifie .galerie_item .date {display:none;} // a enlever .jr_articles.justifie .galerie_item .bouton_lien {display:none;} // a enlever*/ /* Fin Gestion du mode d'affichage : justifie */ /* Gestion du mode d'affichage : mur carte */ .mur.carte .jr_articles {column-gap: 10px;} @media (min-width: 450px) { .mur.carte .jr_articles{columns: 2;}} @media (min-width: 750px){ .mur.carte .jr_articles{columns: 3; }} @media (min-width: 1024px){ .mur.carte .jr_articles{columns: 4; }} @media (min-width: 1280px){ .mur.carte .jr_articles{columns: 5; }} @media (min-width: 1800px){ .mur.carte .jr_articles{columns: 6; }} .mur.carte .jr_articles { display: block;} .mur.carte .jr_articles .galerie_item.cache {display:none;} .mur.carte .jr_articles .galerie_item {margin-bottom: 10px;} .mur.carte .jr_articles .galerie_item img {height: auto;} /* Fin Gestion du mode d'affichage : mur carte */ /* Gestion du mode d'affichage : carte */ .carte .jr_articles { display: grid; grid-gap: 10px; grid-column-gap: 20px;} @media (min-width: 450px) { .carte .jr_articles{grid-template-columns: repeat(2, 1fr);}} @media (min-width: 750px){ .carte .jr_articles{grid-template-columns: repeat(3, 1fr); }} @media (min-width: 1024px){ .carte .jr_articles{grid-template-columns: repeat(4, 1fr); }} @media (min-width: 1280px){ .carte .jr_articles{grid-template-columns: repeat(5, 1fr); }} @media (min-width: 1800px){ .carte .jr_articles{grid-template-columns: repeat(6, 1fr); }} .carte .jr_articles .galerie_item { display: grid; grid-auto-rows: auto; grid-gap: 5px; position: relative; overflow: hidden; grid-template-areas: "image image image image image" "etoiles vues commentaires editer supprimer" "titre titre titre titre titre" "espace_hori_3 espace_hori_3 espace_hori_3 espace_hori_3 espace_hori_3" "legende legende legende legende legende" "auteur auteur auteur date date" "bouton_lien bouton_lien bouton_lien bouton_lien bouton_lien";} /*.jr_articles.carte.image_seule .galerie_item {grid-gap: 0px;}*/ /* Pour une présentation ou l'image est seule */ .jr_articles .galerie_item img {width: 100%; height: 200px; object-fit: cover;border-bottom: 7px solid var(--jr_couleur_bordure);} .jr_articles .galerie_item .image {grid-area:image;} .jr_articles .galerie_item .image_supp_1 {grid-area:image_supp_1;} .jr_articles .galerie_item .image_supp_2 {grid-area:image_supp_2;} .jr_articles .galerie_item .image_supp_3 {grid-area:image_supp_3;} .jr_articles .galerie_item .vues {grid-area:vues;} .jr_articles .galerie_item .nouveaute {grid-area:nouveaute; text-align: right; color:Tomato;} .jr_articles .galerie_item .commentaires {grid-area:commentaires;} .jr_articles .galerie_item .editer {grid-area:editer;} .jr_articles .galerie_item .points {grid-area:points;} .jr_articles .galerie_item .points_texte {grid-area:points_texte;} .jr_articles .galerie_item .supprimer {grid-area:supprimer;} .jr_articles .galerie_item .titre {grid-area:titre; margin-left: 10px; margin-right: 10px;} .jr_articles .galerie_item .etoiles {grid-area:etoiles;} .jr_articles .galerie_item .qualite {grid-area:qualite;} .jr_articles .galerie_item .legende {grid-area:legende; text-align: justify; margin-left: 10px; margin-right: 10px;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;} .jr_articles .galerie_item .auteur {grid-area:auteur;} .jr_articles .galerie_item .date {grid-area:date;} .jr_articles .galerie_item .bouton {grid-area:bouton;} /*.jr_articles .galerie_item .bouton_lien {grid-area:bouton_lien;}*/ .jr_articles .galerie_item .difficulte {grid-area:difficulte;} .jr_articles .galerie_item .jaime {grid-area:jaime;} .jr_articles .galerie_item .espace_vert_3 {grid-area:espace_vert_3;width:3px;} .jr_articles .galerie_item .espace_hori_3 {grid-area:espace_hori_3;height:3px;} .jr_articles .galerie_item .trait_vert_3 {grid-area:trait_vert_3;width:3px;background:var(--jr_couleur_bordure);} .jr_articles .galerie_item .trait_hori_3 {grid-area:trait_hori_3;height:3px; background: var(--jr_couleur_bordure);} .jr_articles .galerie_item .sortir {grid-area:sortir;} /* Fin Gestion du mode d'affichage : carte */ /* Gestion du mode d'affichage : mur carte_centree */ .mur.carte_centree .jr_articles {column-gap: 10px;} @media (min-width: 450px) { .mur.carte_centree .jr_articles{columns: 2;}} @media (min-width: 750px){ .mur.carte_centree .jr_articles{columns: 3; }} @media (min-width: 1024px){ .carte_centree .jr_articles.mur{columns: 4; }} @media (min-width: 1280px){ .mur.carte_centree .jr_articles{columns: 5; }} @media (min-width: 1800px){ .mur.carte_centree .jr_articles{columns: 6; }} .mur.carte_centree .jr_articles { display: block;} /* Fin Gestion du mode d'affichage : mur carte_centree */ /* Gestion du mode d'affichage : carte_centree */ .carte_centree .jr_articles .galerie_item { display: grid; grid-auto-rows: auto; grid-gap: 5px; position: relative; overflow: hidden; margin-bottom: 10px; padding-top: 20px; grid-template-areas: "image image image image image" "etoiles vues commentaires editer supprimer" "titre titre titre titre titre" "legende legende legende legende legende" "auteur auteur auteur date date" "bouton_lien bouton_lien bouton_lien bouton_lien bouton_lien";} .carte_centree .jr_articles .galerie_item img {width: 150px; height: 150px; object-fit: cover;/*border: 7px solid var(--jr_couleur_bordure);*/ border-radius: 50%;border: 5px solid var(--jr_couleur_fond_boite); box-shadow: 0 0 0 7px var(--jr_couleur_bordure);} .carte_centree .jr_articles { display: grid; grid-gap: 10px;} @media (min-width: 450px) { .carte_centree .jr_articles{grid-template-columns: repeat(2, 1fr);}} @media (min-width: 750px){ .carte_centree .jr_articles{grid-template-columns: repeat(3, 1fr); }} @media (min-width: 1024px){ .carte_centree .jr_articles{grid-template-columns: repeat(4, 1fr); }} @media (min-width: 1280px){ .carte_centree .jr_articles{grid-template-columns: repeat(5, 1fr); }} @media (min-width: 1800px){ .carte_centree .jr_articles{grid-template-columns: repeat(6, 1fr); }} /* Fin Gestion du mode d'affichage : carte_centree */ /* Gestion du mode d'affichage : mur banniere */ .mur.banniere .jr_articles {column-gap: 10px;} @media (min-width: 450px) { .mur.banniere .jr_articles{columns: 1;}} @media (min-width: 750px){ .mur.banniere .jr_articles{columns: 1; }} @media (min-width: 1024px){ .mur.banniere .jr_articles{columns: 2; }} @media (min-width: 1280px){ .mur.banniere .jr_articles{columns: 3; }} @media (min-width: 1800px){ .mur.banniere .jr_articles{columns: 4; }} .mur.banniere .jr_articles { display: block;} .mur.banniere .jr_articles .galerie_item img {width: 100%; height: 100%; object-fit: cover;} /* Fin Gestion du mode d'affichage : mur banniere */ /* Gestion du mode d'affichage : banniere */ @media (min-width: 450px) { .banniere .jr_articles{grid-template-columns: repeat(1, 1fr);}} @media (min-width: 750px){ .banniere .jr_articles{grid-template-columns: repeat(1, 1fr);}} @media (min-width: 1024px){ .banniere .jr_articles{grid-template-columns: repeat(2, 1fr);}} @media (min-width: 1280px){ .banniere .jr_articles{grid-template-columns: repeat(3, 1fr); }} @media (min-width: 1800px){ .banniere .jr_articles{grid-template-columns: repeat(4, 1fr);}} .banniere .jr_articles { display: grid; grid-gap: 10px; grid-column-gap: 20px;} .banniere .jr_articles .galerie_item img {width: 100px; height: 100%; object-fit: cover; border:none;} .banniere .jr_articles .galerie_item .bouton {width: 100%;border-radius: 10px;} .banniere .jr_articles .galerie_item .auteur {text-align: left;} .banniere .jr_articles .galerie_item .titre {min-height: 30px; word-break: break-all;} /* Fin Gestion du mode d'affichage : banniere */ /* Gestion du mode d'affichage : banniere gauche */ .banniere.ban_gauche .jr_articles .galerie_item { display: grid; grid-auto-rows: auto; grid-gap: 5px; grid-template-columns: 100px auto 5px; position: relative; overflow: hidden; margin-bottom: 10px; grid-template-areas: "image nouveaute ." "image titre ." "image trait_hori_3 ." "image legende ." "image bouton ." "image . ." ;} .banniere.ban_gauche .jr_articles .galerie_item .image {padding-right: 5px; width: 100px; height: 100%;} /* Fin Gestion du mode d'affichage : banniere gauche*/ /* Gestion du mode d'affichage : banniere droite */ .banniere.ban_droite .jr_articles .galerie_item { display: grid; grid-auto-rows: auto; grid-gap: 5px; grid-template-columns: 5px auto 100px; position: relative; overflow: hidden; margin-bottom: 10px; grid-template-areas: ". nouveaute image" ". titre image" ". trait_hori_3 image" ". legende image" ". bouton image" ". . image" ;} .banniere.ban_droite .jr_articles .galerie_item .image {padding-left: 5px; text-align: right; max-width: 100px; height: 100%;} /* Fin Gestion du mode d'affichage : banniere droite */ /* Gestion du mode d'affichage : bouton */ /* mur */ .mur.bouton .jr_articles {column-gap: 10px;} @media (min-width: 450px) { .mur.bouton .jr_articles{columns: 2;}} @media (min-width: 750px){ .mur.bouton .jr_articles{columns: 3; }} @media (min-width: 1024px){ .mur.bouton .jr_articles{columns: 5; }} @media (min-width: 1280px){ .mur.bouton .jr_articles{columns: 6; }} @media (min-width: 1800px){ .mur.bouton .jr_articles{columns: 8; }} .mur.bouton .jr_articles { display: block;} .mur.bouton .jr_articles .galerie_item {margin-bottom: 10px;} .mur.bouton .jr_articles .galerie_item img {height: auto;} /* Fin mur */ @media (min-width: 450px) { .bouton .jr_articles{grid-template-columns: repeat(2, 1fr);}} @media (min-width: 750px){ .bouton .jr_articles{grid-template-columns: repeat(3, 1fr);}} @media (min-width: 1024px){ .bouton .jr_articles{grid-template-columns: repeat(5, 1fr);}} @media (min-width: 1280px){ .bouton .jr_articles{grid-template-columns: repeat(6, 1fr); }} @media (min-width: 1800px){ .bouton .jr_articles{grid-template-columns: repeat(8, 1fr);}} .bouton .jr_articles { display: grid; grid-gap: 10px;} .bouton .jr_articles .galerie_item .bouton_lien {margin:10px} .bouton .jr_articles .galerie_item { background: none; color: var(--jr_couleur_texte); box-shadow: none; grid-template-areas:"bouton_lien";} /* Fin Gestion du mode d'affichage : bouton */ /* Gestion du mode d'affichage : mur incrustation */ .jr_articles_colonne.mur.incrustation .jr_articles {column-gap: 10px;} @media (min-width: 450px) { .mur.image .jr_articles{columns: 2;}} @media (min-width: 750px){ .mur.image .jr_articles{columns: 3; }} @media (min-width: 1024px){ .mur.image .jr_articles{columns: 4; }} @media (min-width: 1280px){ .mur.image .jr_articles{columns: 5; }} @media (min-width: 1800px){ .mur.image .jr_articles{columns: 6; }} .jr_articles_colonne.mur.incrustation .jr_articles { display: block;} .jr_articles_colonne.mur.incrustation .jr_articles .galerie_item {margin-bottom: 10px;} .jr_articles_colonne.mur.incrustation .jr_articles .galerie_item img {height: auto;} /* Fin Gestion du mode d'affichage : mur incrustation */ .incrustation.ecran_mobile .jr_articles .galerie_item .incrustation_grille{opacity:1;} .incrustation.survol .jr_articles .galerie_item:hover img {filter: blur(4px);} /*.incrustation.survol .jr_articles .galerie_item:hover img {filter: none;}*/ .incrustation .jr_articles .galerie_item .incrustation_grille{opacity:1;width: 100%; position: absolute;} .incrustation.survol .jr_articles .galerie_item .incrustation_grille{opacity:0;} .incrustation.survol .jr_articles .galerie_item:hover .incrustation_grille{opacity:1; background: rgb(0, 0, 0, 0.2);} /* Gestion du mode d'affichage : incrustation */ /*.jr_articles_colonne .jr_articles .incrustation{grid-template-areas: "etoiles vues commentaires editer supprimer" "titre titre titre titre titre" "legende legende legende legende legende" "auteur auteur auteur date date";}*/ .jr_articles_colonne.incrustation .jr_articles .grille h2{color: var(--jr_couleur_texte_sombre);} .jr_articles_colonne.incrustation .jr_articles .grille{ display: grid; grid-auto-rows: auto; cursor: pointer; grid-gap: 0px;color: var(--jr_couleur_texte_sombre);position: absolute; left:0px; top:0px; width:100%; height:300px; overflow: hidden; grid-gap: 5px; grid-template-rows: 20px auto 20px;grid-template-areas: "vues commentaires editer supprimer" "titre titre titre titre" "auteur auteur date date";} /*.jr_articles.incrustation .galerie_item img { width: 100%; height: 300px; border-bottom: none;}*/ .jr_articles .galerie_item .incrustation_grille .surligne_haut{position: absolute; top: 0px; left: 0px; background: rgb(0, 0, 0, 0.5);background: linear-gradient(rgba(0, 0, 0, .8) 0%, transparent 90%); width: 100%;} .jr_articles .galerie_item .incrustation_grille .surligne_bas {position: absolute; bottom: 0px; width: 100%; background: rgb(0, 0, 0, 0.5);background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.8) 100%); left: 0px;} /* fin Gestion du mode d'affichage : incrustation */ /* Gestion du mode d'affichage : photobox_1 */ .photobox_1 .jr_articles { display: grid; grid-gap: 10px;} .photobox_1 .jr_articles .galerie_item { display: grid; grid-auto-rows: auto; grid-gap: 5px; position: relative; overflow: hidden; grid-template-areas: ". . . . sortir" "image image image image image" "titre titre titre titre titre" "trait_hori_3 trait_hori_3 trait_hori_3 trait_hori_3 trait_hori_3" "espace_hori_3 espace_hori_3 espace_hori_3 espace_hori_3 espace_hori_3" "legende legende legende legende legende";} .jr_galerie .jr_popup .photobox_1 {width: 100%; height: 100%; position: relative; display: block;} .photobox_1 .jr_articles .galerie_item img {height: auto; border-bottom: none;} /*.jr_articles.photobox_1 .galerie_item {width: 500px; left: calc(50% - 250px); top: 15%;}*/ /*.jr_articles.photobox_1 { display: grid; grid-gap: 10px;}*/ .photobox_1.ecran_pc .jr_articles .galerie_item { display: grid; grid-auto-rows: auto; grid-gap: 5px; position: relative; overflow: hidden; grid-template-areas: "image . . . sortir" "image titre titre titre titre" "image trait_hori_3 trait_hori_3 trait_hori_3 trait_hori_3" "image espace_hori_3 espace_hori_3 espace_hori_3 espace_hori_3" "image legende legende legende legende" ;} /*.jr_galerie .jr_popup .photobox_1 {width: 100%; height: 100%; position: relative; background: rgb(128, 128, 128); display: block;}*/ .photobox_1.ecran_pc .jr_articles .galerie_item {width: 1000px; left: calc(50% - 500px); top: 0;} .photobox_1.ecran_pc .jr_articles .galerie_item .image {align-content: center; width:500px;} .photobox_1 .jr_articles .galerie_item .legende {margin: 10px; display: block;} /* Fin Gestion du mode d'affichage : photobox_1 */ /* galerie photobox*/ .jr_photobox .sombre{background-color: #252728;color: var(--jr_couleur_texte_sombre); } .jr_photobox .sombre h2 {color: var(--jr_couleur_titre_2_sombre);} .jr_photobox .sombre .jr_scroll {color: var(--jr_couleur_texte_sombre); background: #252728;} .jr_photobox .sombre .contenu {color: var(--jr_couleur_texte_sombre); background: #252728;} .jr_photobox .sombre.ecran_mobile .contenu{background: var(--jr_couleur_fond_boite); color: var(--jr_couleur_texte);} .jr_photobox .sombre.ecran_mobile h2{color: var(--jr_couleur_texte_sombre);} .jr_photobox .sombre textarea {color: #ffffff;} .jr_photobox .sombre.ecran_mobile textarea {color: black;} .popup.photobox.ecran_pc .jr_articles {/*margin-top: 30px;*/ text-align: justify;} .jr_photobox{background: var(--jr_couleur_fond); color: var(--jr_couleur_texte);} .jr_photobox .jr_scroll {overflow: auto; width: var(--largeur_fen);height: var(--hauteur_fen);} .jr_photobox .ecran_pc .jr_scroll {width: 500px;border-left: 1px solid rgba(255, 255, 255, 0.2);} .jr_photobox article {background-color: white;} /*.jr_photobox .photobox_item {border-radius: 0;}*/ .jr_photobox .image_photobox {background-color: #202020; position:relative;display: flex; align-items: center; justify-content: center;} .jr_photobox .image_photobox img {max-height: var(--hauteur_fen); object-fit: contain; padding-bottom: 20px; padding-top: 20px;} .jr_photobox .ecran_pc .image_photobox img {max-height: var(--hauteur_fen);} .jr_photobox .ecran_pc .image_photobox{flex-grow:10;} .jr_photobox .contenu, .jr_photobox #jr_commentaires, .jr_photobox #carte_photobox {padding: 10px; padding-top: 20px;padding-bottom: 60px;} /*.jr_photobox .ecran_pc .contenu{margin: 5px;}*/ .jr_photobox .ecran_pc #carte_photobox {width: calc(100% - 10px);} .jr_photobox .contenu .titre {text-align:center;} /*.jr_photobox .jr_tous_commentaires{margin: auto; margin-top: 60px;margin-bottom: 60px;} .jr_photobox .comment, .jr_photobox .jr_tous_commentaires .comment {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; padding-bottom: 5px;text-align: left;} .jr_photobox .comment {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; padding-bottom: 5px;text-align: left;}*/ .jr_photobox .contenu .header{display:flex; justify-content: space-between;} .jr_photobox .contenu .header .auteur{text-align:left;} .jr_photobox .contenu .header .infos{display: contents;} .jr_photobox .contenu .header .date{text-align:right;} .jr_photobox .image_photobox .precedente {position: absolute; top: 0; left: 0; width: 50%; height: 100%; display: flex; justify-content: left; align-items: center; color: white;} .jr_photobox .image_photobox .precedente i{padding-left: 20px; cursor: pointer;} .jr_photobox .image_photobox .suivante { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; display: flex; justify-content: right; align-items: center; color: white;} .jr_photobox .image_photobox .suivante i{padding-right: 20px; cursor: pointer;} .jr_photobox .image_photobox .menu {position: absolute; top: 0px; left: 0; display: flex; justify-content: space-evenly; align-items: center; flex-direction: column; flex-wrap: wrap; background-color: rgb(255, 255, 255, 0.1); gap: 20px; height:30%;} .jr_photobox .image_photobox .infos { position: absolute; bottom: 0;} .jr_photobox .ecran_pc .photobox_item {display:flex;} .jr_photobox .validation {margin-top: 10px; text-align: center;} /* fin galerie photobox*/ /* galerie options*/ form.options_telechargement >div {display: flex; flex-wrap: wrap;} form.options_telechargement >div >div:nth-child(1) {width: 50px;} form.options_telechargement >div >div:nth-child(2) {width: 50px;} form.options_telechargement >div >div:nth-child(3) {width: 200px;} form.options_telechargement >div >div:nth-child(4) {width: 200px;} form.options_telechargement >div >div:nth-child(5) {width: 75px;} /*form.options_telechargement >div >div:nth-child(6) {width: 50px;}*/ /* fin galerie options*/ /* galerie generateur docs */ .entrees_generateur{display: grid; row-gap: 20px;background: var(--jr_couleur_fond); color: var(--jr_couleur_texte); box-shadow: 0 3px 15px rgba(51, 51, 51, 0.2); border-radius: 10px; transition: 0.2s ease;overflow: auto;} .entrees_generateur .entree {display: grid; grid-template-columns: 200px 400px auto; grid-gap: 20px; border-bottom-style: inset; padding-bottom: 10px; margin-left: 20px; margin-right: 20px;} /* fin galerie generateur docs */ /* galerie concours_du_mois_debug */ .jr_concours_du_mois_debug .carte .jr_articles {display: block;} .debug_concours {display: flex;} @media (max-width: 700px){ .debug_concours{flex-wrap: wrap;}} /* fin galerie concours_du_mois_debug */ /* commentaires */ .colonne_droite .commentaires_photos, .colonne_gauche .commentaires_photos{margin-top: 0px;} .commentaires_photos{margin: auto; margin-top: 60px;margin-bottom: 60px; overflow-y: auto; overflow-x: hidden; max-height: 1000px;} /*.commentaires_photos .comment {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; padding-bottom: 5px;text-align: left;}*/ .commentaires_photos .comment {display: grid; grid-column-gap: 5px; grid-template-columns : 50px auto auto; grid-template-rows : 20px 20px auto auto; grid-template-areas: "avatar_membre comment_auteur comment_image" ". comment_date comment_image" ". comment_repondre comment_image" ". comment_content comment_image" ;} .commentaires_photos .avatar.membre{grid-area:avatar_membre; width:50px;} .commentaires_photos .avatar.membre img {width: 100%; border: 2px solid var(--jr_couleur_bordure); border-radius: 50%;} .commentaires_photos .comment_auteur {grid-area:comment_auteur; font-weight: 700;text-align: justify;text-wrap: nowrap;} .commentaires_photos .comment_date {grid-area:comment_date;font-size: small;text-align: justify;} .commentaires_photos .comment_content {grid-area:comment_content;text-align: justify; margin-bottom: 20px;} .commentaires_photos .comment_repondre {grid-area:comment_repondre;text-align: justify;} .commentaires_photos .niveau_comment_2 {margin-left: 50px;} .commentaires_photos .niveau_comment_3 {margin-left: 100px;} .commentaires_photos .comment_image {grid-area:comment_image;text-align: right;} .commentaires_photos .comment_image img{ max-height: 58px; max-width: 70px; object-fit: scale-down;cursor: pointer;} /* fin commentaires */ /* shortcode générateur */ .jr_shortcode_generateur .jr_articles {display: block;} /* fin shortcode générateur */ /* thèmes concours du mois */ .jr_themes_concours_du_mois .jr_articles {display: block;} /* fin thèmes concours du mois */ .lightbox_item .fa-heart, .check_icone .fa-heart {color: #e91919;} .lightbox_item .fa-square, .lightbox_item .fa-square-check, .lightbox_item .fa-flag, .check_icone .fa-square, .check_icone .fa-square-check, .check_icone .fa-flag {color: #1fc91f;} /* theme */ /*typography*/ .jr_theme strong { font-weight: 500;} .jr_theme em { font-style: italic;} .jr_theme .font-family { display: flex; flex-wrap: wrap; justify-content: space-between;} /* Les boutons */ .jr_theme .bouton_1 {outline: none; width: 100%; text-align: center; display: inline-block; border: none; font: 500 16px "Poppins", sans-serif; padding: 10px; cursor: pointer; border-radius: var(--borderRadius); background: var(--jr_couleur_bouton); color: var(--jr_couleur_fond); position: relative; top: 0; transition: 0.2s ease;text-decoration: none;} .jr_theme .bouton_1:hover { background: var(--jr_couleur_bouton_survol);} /*badges*/ /*.jr_theme .badge { display: inline-block; padding: 6px 12px; border-radius: 50px; font-weight: 500; text-transform: uppercase; margin: 5px 10px 5px 0; line-height: 1;}*/ /* fin theme */ /* Ci-dessous tout ce qui sert pour les themes Tout est à copier */ /*:root { --jr_couleur_fond: #f9f9f9;}*/ /*overall layout*/ /*.jr_couleurs_themes { --neutralShade1: #f2f2f2; --neutralShade2: #e8e9e9; --neutralShade3: #d1d3d4; --neutralShade4: #babdbf; --neutralShade5: #808488; --neutralShade6: #666a6d; --neutralShade7: #4d5052; --neutralShade8: #212122; --grayColor: #999; --lightGrayColor: #ddd; --borderRadius: 6px; --boxShadow: 0 2px 5px rgba(51, 51, 51, 0.2);} * { box-sizing: border-box;} .jr_themes { width: 90%; max-width: 1050px; margin: 3em auto 0; border: 1px solid var(--accentColor); display: grid; grid: repeat(5, fit-content(300px)) / repeat(4, 1fr); grid-template-areas: "colors typography typography typography" "colors buttons buttons links" "inputs inputs inputs inputs" "badges tooltips alerts alerts" "loading tooltips alerts alerts"; color: var(--jr_couleur_texte); text-align: left;} .jr_theme .colors { grid-area: colors; padding: 30px; border: 1px solid var(--accentColor); border-width: 0 1px 1px 0;} .jr_theme .typography { grid-area: typography; border-bottom: 1px solid var(--accentColor);} .jr_theme .buttons-wrapper { grid-area: buttons; padding: 30px; border-bottom: 1px solid var(--accentColor);} .jr_theme .links { grid-area: links; padding: 30px; border: 1px solid var(--accentColor); border-width: 0 0 1px 1px;} .jr_theme .badges { grid-area: badges; padding: 30px 30px 40px;} .jr_theme .alerts { grid-area: alerts; padding: 40px 30px;} .jr_theme .tooltips { grid-area: tooltips; padding: 20px 30px 30px; border: 1px solid var(--accentColor); border-width: 0 1px;} .jr_theme .inputs-selects { padding: 40px 30px; grid-area: inputs; display: grid; grid-auto-flow: dense; grid: repeat(2, max-content) / repeat(6, 1fr); grid-gap: 30px; border-bottom: 1px solid var(--accentColor);} .jr_theme .loading { grid-area: loading; padding: 40px 30px 30px 30px; text-align: center; border-top: 1px solid var(--accentColor);} .jr_themes > section { position: relative;} .jr_themes > section > h6 { color: var(--accentColor); background: var(--jr_couleur_fond); position: absolute; top: -10px; left: 20px; padding: 0 10px;} .jr_themes > section h6.subheader { color: var(--grayColor); margin-top: 20px; margin-bottom: 20px; width: 100%;} .jr_theme { background: var(--jr_couleur_fond); text-align: center; transition: all 0.3s ease;} .jr_theme .inputs-selects .inputs { grid-column: span 3;} .jr_theme .inputs-selects .textarea-select { grid-column: span 3;} .jr_theme .inputs-selects .inputs .input__wrapper:last-child, .jr_theme .inputs-selects .textarea-select .input__wrapper:last-child { margin: 0;} .jr_theme .inputs-selects .toggle-buttons, .jr_theme .inputs-selects .checkboxes, .jr_theme .inputs-selects .radio-buttons { grid-column: span 2;} .jr_theme .tooltips .tooltip:nth-child(-n + 2) { margin: 90px 0 20px;} .jr_theme .loading .spinner-2 { margin-top: 30px;} */ /*colors*/ /*.jr_theme .palette { display: grid; grid: 80px 45px min-content / repeat(5, minmax(50px, 1fr)); margin-bottom: 1em;} .jr_theme .palette__jr_themes { grid-column: span 5;} .jr_theme .palette h5 { grid-column: span 5; text-align: left; padding: 10px 0;} .jr_theme .palette.primary div:nth-child(1) { background: var(--jr_couleur_bouton);} .jr_theme .palette.primary div:nth-child(2) { background: var(--primaryShade1);} .jr_theme .palette.primary div:nth-child(3) { background: var(--primaryShade2);} .jr_theme .palette.primary div:nth-child(4) { background: var(--primaryShade3);} .jr_theme .palette.primary div:nth-child(5) { background: var(--jr_couleur_bouton);} .jr_theme .palette.primary div:nth-child(6) { background: var(--jr_couleur_lien_survol);} .jr_theme .palette.secondary div:nth-child(1) { background: var(--jr_couleur_bordure);} .jr_theme .palette.secondary div:nth-child(2) { background: var(--secondaryShade1);} .jr_theme .palette.secondary div:nth-child(3) { background: var(--secondaryShade2);} .jr_theme .palette.secondary div:nth-child(4) { background: var(--secondaryShade3);} .jr_theme .palette.secondary div:nth-child(5) { background: var(--secondaryShade4);} .jr_theme .palette.secondary div:nth-child(6) { background: var(--secondaryShade5);} .jr_theme .palette.accent1 div:nth-child(1) { background: var(--accentColor);} .jr_theme .palette.accent1 div:nth-child(2) { background: var(--accentShade1);} .jr_theme .palette.accent1 div:nth-child(3) { background: var(--accentShade2);} .jr_theme .palette.accent1 div:nth-child(4) { background: var(--accentShade3);} .jr_theme .palette.accent1 div:nth-child(5) { background: var(--accentShade4);} .jr_theme .palette.accent1 div:nth-child(6) { background: var(--accentShade5);} .jr_theme .palette.accent2 div:nth-child(1) { background: var(--accent2Color);} .jr_theme .palette.accent2 div:nth-child(2) { background: var(--accent2Shade1);} .jr_theme .palette.accent2 div:nth-child(3) { background: var(--accent2Shade2);} .jr_theme .palette.accent2 div:nth-child(4) { background: var(--accent2Shade3);} .jr_theme .palette.accent2 div:nth-child(5) { background: var(--accent2Shade4);} .jr_theme .palette.accent2 div:nth-child(6) { background: var(--accent2Shade5);} .jr_theme .palette.accent3 div:nth-child(1) { background: var(--accent3Color);} .jr_theme .palette.accent3 div:nth-child(2) { background: var(--accent3Shade1);} .jr_theme .palette.accent3 div:nth-child(3) { background: var(--accent3Shade2);} .jr_theme .palette.accent3 div:nth-child(4) { background: var(--accent3Shade3);} .jr_theme .palette.accent3 div:nth-child(5) { background: var(--accent3Shade4);} .jr_theme .palette.accent3 div:nth-child(6) { background: var(--accent3Shade5);} .jr_theme .palette.neutrals { grid-template-rows: repeat(2, 50px) min-content; grid-template-columns: repeat(4, 1fr);} .jr_theme .palette.neutrals div:nth-child(1) { background: var(--neutralShade1);} .jr_theme .palette.neutrals div:nth-child(2) { background: var(--neutralShade2);} .jr_theme .palette.neutrals div:nth-child(3) { background: var(--neutralShade3);} .jr_theme .palette.neutrals div:nth-child(4) { background: var(--neutralShade4);} .jr_theme .palette.neutrals div:nth-child(5) { background: var(--neutralShade5); grid-row: 2;} .jr_theme .palette.neutrals div:nth-child(6) { background: var(--neutralShade6); grid-row: 2;} .jr_theme .palette.neutrals div:nth-child(7) { background: var(--neutralShade7); grid-row: 2;} .jr_theme .palette.neutrals div:nth-child(8) { background: var(--neutralShade8); grid-row: 2;} */ /*typography*/ /*.jr_theme strong { font-weight: 500;} .jr_theme em { font-style: italic;} .jr_theme .font-family { display: flex; flex-wrap: wrap; justify-content: space-between;} .jr_theme .font-family > div { flex: 1 1 30%; padding: 30px 30px 0; min-width: 10em;} .jr_theme .font-family-medium > * { font-weight: 500;} .jr_theme .font-family-light > * { font-weight: 300;} .jr_theme .font-example { display: flex; flex-wrap: wrap;} .jr_theme .font-example > div { flex: 1 1 45%; padding: 30px; min-width: 16em;} .jr_theme .font-example p { margin-bottom: 15px;} */ /*checkboxes*/ /*.jr_theme input:disabled ~ * { opacity: 0.3; user-select: none; pointer-events: none;} .jr_theme .checkbox-toggle input { display: none;} .jr_theme .checkbox-toggle label { outline: 0; display: block; width: 45px; height: 16px; background: var(--grayColor); position: relative; cursor: pointer; border-radius: 2em; padding: 2px; transition: all 0.4s ease; margin: 0.8em;} .jr_theme .checkbox-toggle label:after { position: relative; display: block; content: ""; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: all 0.2s ease; border: 1px solid var(--grayColor); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); left: -4px; top: -5px;} .jr_theme .checkbox-toggle input:checked + label { background: var(--accent2Color);} .jr_theme .checkbox-toggle input:checked + label:after { left: 52%;} .jr_theme .checkbox { position: relative; user-select: none; margin-bottom: 10px;} .jr_theme .checkbox input { display: none;} .jr_theme .checkbox label { position: relative; vertical-align: middle; cursor: pointer; font-weight: 500; padding-left: 35px;} .jr_theme .checkbox span.box { display: inline-block; width: 20px; border-radius: var(--borderRadius); border: 1px solid var(--grayColor); width: 24px; height: 24px; vertical-align: middle; margin-right: 3px; transition: 0.3s ease; position: absolute; left: 0;} .jr_theme .checkbox span.box:before, .jr_theme .checkbox span.box:after { content: ""; position: absolute; width: 4px; height: 16px; border-radius: 40px; background: var(--jr_couleur_fond_formulaire); transition: all 0.3s ease;} .jr_theme .checkbox span.box:before { transform: rotate(45deg) translateY(-5px) translateX(10px) scale(0);} .jr_theme .checkbox span.box:after { height: 8px; transform: rotate(-45deg) translateY(10px) translateX(-4px) scale(0);} .jr_theme .checkbox input:checked + label span.box { background: var(--accent2Color); border-color: var(--accent2Color);} .jr_theme .checkbox input:checked + label span.box:before { transform: rotate(45deg) translateY(-5px) translateX(10px) scale(1);} .jr_theme .checkbox input:checked + label span.box:after { height: 8px; transform: rotate(-45deg) translateY(10px) translateX(-4px) scale(1);} .jr_theme .checkbox input:disabled:checked + span.box { background: var(--grayColor); border: var(--grayColor);} .jr_theme .checkbox input:disabled:checked ~ label:before, .jr_theme .checkbox input:disabled:checked ~ label:after { background: black;} */ /* Les boutons */ /*.jr_theme .bouton_1 {outline: none; width: 100%; text-align: center; display: inline-block; border: none; font: 500 16px "Poppins", sans-serif; padding: 10px; cursor: pointer; border-radius: var(--borderRadius); background: var(--jr_couleur_bouton); color: var(--jr_couleur_fond); position: relative; top: 0; transition: 0.2s ease;text-decoration: none;} .jr_theme .bouton_1:hover { background: var(--jr_couleur_bouton);} .jr_theme .bouton_2 {outline: none; width: 100%; text-align: center; display: inline-block; border: none; font: 500 16px "Poppins", sans-serif; padding: 10px; cursor: pointer; border-radius: var(--borderRadius); background: var(--jr_couleur_bordure); color: var(--jr_couleur_fond_boite); position: relative; top: 0; transition: 0.2s ease;text-decoration: none;} .jr_theme .bouton_2:hover { background: var(--secondaryShade4);} .jr_theme .bouton_53{background: var(--jr_couleur_bouton); color: var(--jr_couleur_fond_boite); border: 0 solid #E5E7EB; font-size: 1rem; font-weight: 700; justify-content: center; line-height: 1.75rem; padding: .75rem 1.65rem; text-align: center; width: 100%; cursor: pointer; transform: rotate(-2deg); margin: 10px;} .jr_theme .bouton_53:focus {outline: 0;} .jr_theme .bouton_53:after { content: ''; position: absolute; border: 1px solid #000000; bottom: 4px; left: 4px; width: calc(100% - 1px); height: calc(100% - 1px);} .jr_theme .bouton_53:hover:after { bottom: 2px; left: 2px;} @media (min-width: 768px) {.jr_theme .bouton_53 { padding: .75rem 3rem; font-size: 1.25rem;}} .jr_theme .bouton_89 { --b: 3px; --s: .45em; --color: var(--jr_couleur_bouton); padding: calc(.5em + var(--s)) calc(.9em + var(--s)); color: var(--color); --_p: var(--s); background: conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--color) 0) var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p)); transition: .3s linear, color 0s, background-color 0s; outline: var(--b) solid #0000; outline-offset: .6em; font-size: 16px; border: 0;margin: 5px;} .jr_theme .bouton_89:hover, .jr_theme .bouton_89:focus-visible{--_p: 0px; outline-color: var(--color); outline-offset: .05em;} .jr_theme .bouton_89:active {background: var(--color); color: #fff;} .jr_theme .bouton_92 { --c: var(--jr_couleur_fond_boite); font-weight: bold; font-size: 2rem; margin: 0; cursor: pointer;color: var(--jr_couleur_fond_boite); background:var(--jr_couleur_bouton); padding: .1em .3em; border: none; transform: perspective(500px) rotateY(calc(20deg*var(--_i,-1))); outline-offset: .1em; transition: 0.3s; } .jr_theme .bouton_92:hover, .jr_theme .bouton_92:focus-visible {--_p: 0%; --_i: 1;} .jr_theme .bouton_92:active {text-shadow: none; color: var(--c); box-shadow: inset 0 0 9e9q #0005; transition: 0s;} .jr_theme .bouton_55 { align-self: center; background-color: #fff; background-position: 0 90%; background-repeat: repeat no-repeat; background-size: 4px 3px; border-radius: 15px 225px 255px 15px 15px 255px 225px 15px; border-style: solid; border-width: 2px; box-shadow: rgba(0, 0, 0, .2) 15px 28px 25px -18px; box-sizing: border-box; color: #41403e; cursor: pointer; display: inline-block; font-size: 1rem; line-height: 23px; outline: none; padding: .75rem; text-decoration: none; transition: all 235ms ease-in-out; border-bottom-left-radius: 15px 255px; border-bottom-right-radius: 225px 15px; border-top-left-radius: 255px 15px; border-top-right-radius: 15px 225px;} .jr_theme .bouton_55:hover { box-shadow: rgba(0, 0, 0, .3) 2px 8px 8px -5px; transform: translate3d(0, 2px, 0);} .jr_theme .bouton_55:focus { box-shadow: rgba(0, 0, 0, .3) 2px 8px 4px -6px;} .jr_theme .bouton_43 { background-image: linear-gradient(-180deg, var(--jr_couleur_bouton) 0%, var(--jr_couleur_bordure) 100%); border-radius: .5rem; box-sizing: border-box; display: flex; font-size: 16px; justify-content: center; padding: 1rem 1.75rem; text-decoration: none; width: 100%; border: 0; cursor: pointer;} .jr_theme .bouton_43:hover { background-image: linear-gradient(-180deg, #1D95C9 0%, #17759C 100%);} @media (min-width: 768px) { .jr_theme .bouton_43 { padding: 1rem 2rem;}} */ /* fin Les boutons */ /*radio buttons*/ /*.jr_theme .radio { margin: 10px 0;} .jr_theme .radio input { display: none;} .jr_theme .radio input:checked + label:after { transform: scale(1);} .jr_theme .radio label { position: relative; padding-left: 32px; cursor: pointer; font-weight: 500;} .jr_theme .radio label:before { content: ""; position: absolute; width: 22px; height: 22px; border: 1px solid var(--grayColor); border-radius: 50%; left: 0; top: 0;} .jr_theme .radio label:after { content: ""; position: absolute; width: 16px; height: 16px; top: 3px; left: 3px; background: var(--accent2Color); border-radius: 50%; transform: scale(0); transition: 0.3s ease;} */ /*buttons & links*/ /*.jr_theme .links__sec { margin: 10px 0 30px;} .jr_theme .links a.link { display: inline; margin: 10px 30px 5px 0; border-bottom: 2px dashed; font-weight: 500; line-height: 2.5; cursor: pointer; color: var(--neutralShade5);} .jr_theme .links a.link:hover, .jr_theme .links a.link.hover { color: var(--neutralShade6); border-bottom: 2px solid;} .jr_theme .links a.link.primary { color: var(--jr_couleur_bouton);} .jr_theme .links a.link.primary:hover, .jr_theme .links a.link.primary.hover { color: var(--jr_couleur_lien_survol);} .jr_theme .links a.link.secondary { color: var(--jr_couleur_bordure);} .jr_theme .links a.link.secondary:hover, .jr_theme .links a.link.secondary.hover { color: var(--secondaryShade5);} .jr_theme .buttons { display: flex; flex-wrap: wrap; align-items: center;} .jr_theme .buttons > * { flex: 1 1 calc(50% - 20px); margin-top: 20px;} .jr_theme .buttons > *:nth-child(odd) { margin-right: 20px;} .jr_theme a.button, .jr_theme input.button, .jr_theme button { outline: none; width: 100%; text-align: center; border: none; font: 500 16px "Poppins", sans-serif; padding: 10px; cursor: pointer; border-radius: var(--borderRadius); background: var(--jr_couleur_bouton); color: var(--jr_couleur_fond_boite); position: relative; top: 0; transition: 0.2s ease;} .jr_theme a.button:hover, .jr_theme input.button:hover, .jr_theme button:hover, .jr_theme a.button.hover, .jr_theme input.button.hover, .jr_theme button.hover { top: -3px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); background: var(--jr_couleur_bouton);} .jr_theme a.button:active, .jr_theme input.button:active, .jr_theme button:active, .jr_theme a.button.active, .jr_theme input.button.active, .jr_theme button.active { background: var(--jr_couleur_bouton); outline: none; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); top: 0;} .jr_theme a.button.disabled, .jr_theme input.button.disabled, .jr_theme button.disabled {opacity: 0.4; user-select: none; pointer-events: none;} .jr_theme a.button.medium, .jr_theme input.button.medium, .jr_theme button.medium { padding: 15px 18px; width: auto; margin-right: 20px; margin-bottom: 20px;} .jr_theme a.button.small, .jr_theme input.button.small, .jr_theme .jr_theme button.small { padding: 10px 12px; width: auto; font-size: 14px; font-weight: 500;} .jr_theme a.button.secondary, .jr_theme input.button.secondary, .jr_theme button.secondary { background: var(--jr_couleur_bordure);} .jr_theme a.button.secondary:active, .jr_theme input.button.secondary:active, .jr_theme button.secondary:active, .jr_theme a.button.secondary:focus, .jr_theme input.button.secondary:focus, .jr_theme button.secondary:focus, .jr_theme a.button.secondary.active, .jr_theme input.button.secondary.active, .jr_theme button.secondary.active { background: var(--secondaryShade4); outline: none;} .jr_theme a.button.accent, .jr_theme input.button.accent, .jr_theme button.accent { background: var(--accentColor);} .jr_theme a.button.accent:active, .jr_theme input.button.accent:active, .jr_theme button.accent:active, .jr_theme a.button.accent:focus, .jr_theme input.button.accent:focus, .jr_theme button.accent:focus, .jr_theme a.button.accent.active, .jr_theme input.button.accent.active, .jr_theme button.accent.active { background: var(--accentShade4);} .jr_theme a.button.accent2, .jr_theme input.button.accent2, .jr_theme button.accent2 { background: var(--accent2Color);} .jr_theme a.button.accent2:active, .jr_theme input.button.accent2:active, .jr_theme button.accent2:active, .jr_theme a.button.accent2:focus, .jr_theme input.button.accent2:focus, .jr_theme button.accent2:focus, .jr_theme a.button.accent2.active, .jr_theme input.button.accent2.active, .jr_theme button.accent2.active { background: var(--accent2Shade4);} .jr_theme a.button.accent3, .jr_theme input.button.accent3, .jr_theme button.accent3 { background: var(--accent3Color);} .jr_theme a.button.accent3:active, .jr_theme input.button.accent3:active, .jr_theme button.accent3:active, .jr_theme a.button.accent3:focus, .jr_theme input.button.accent3:focus, .jr_theme button.accent3:focus, .jr_theme a.button.accent3.active, .jr_theme input.button.accent3.active, .jr_theme button.accent3.active { background: var(--accent3Shade4);} */ /*inputs*/ /*.jr_theme .input__wrapper { margin-bottom: 30px;} .jr_theme .label-form { font-weight: 500; display: block; margin-bottom: 5px;} .jr_theme .sombre input.input-form, .jr_theme .sombre select, .jr_theme .sombre textarea { background: var(--jr_couleur_texte); color: var(--jr_couleur_fond_boite);} .jr_theme input.input-form, .jr_theme textarea { height: 50px; font-size: 16px; border: 2px solid var(--neutralShade3); width: 100%; padding: 12px; font-family: "Poppins"; border-radius: var(--borderRadius); color: var(--jr_couleur_texte); background: var(--jr_couleur_fond_boite);} .jr_theme input.input-form:focus, .jr_theme select:focus, .jr_theme textarea:focus, .jr_theme input.input-form.active, .jr_theme select.active, .jr_theme textarea.active { outline: none; border-color: var(--jr_couleur_bouton);} .jr_theme input.input-form:disabled, .jr_theme select:disabled, .jr_theme textarea:disabled { cursor: not-allowed; background: var(--neutralShade1); opacity: 0.6;} .jr_theme textarea { resize: vertical; min-height: 117px;} .jr_theme select { height: 45px; width: 100%; padding: 8px 12px; border-radius: var(--borderRadius); color: var(--jr_couleur_texte); background-color: var(--jr_couleur_fond_boite); cursor: pointer;} .jr_theme .input__validator { position: relative;} .jr_theme .input__validator__status { position: absolute; border-radius: 50%; background: purple; width: 30px; height: 30px; right: 10px; top: 10px;} .jr_theme .input__validator__status:before, .jr_theme .input__validator__status:after { content: ""; position: absolute; width: 4px; height: 18px; border-radius: 40px; background: var(--jr_couleur_fond_boite);} .jr_theme .input-error input, .jr_theme .input-error select, .jr_theme .input-error textarea { border-color: var(--accent3Color);} .jr_theme .input-error .feedback-form { color: var(--accent3Shade3);} .jr_theme .input-error .input__validator__status { background: var(--accent3Color);} .jr_theme .input-error .input__validator__status:before { transform: rotate(45deg) translateY(-5.5px) translateX(13.5px);} .jr_theme .input-error .input__validator__status:after { transform: rotate(-45deg) translateY(13.5px) translateX(5.5px);} .jr_theme .input-success input, .jr_theme .input-success select, .jr_theme .input-success textarea { border-color: var(--accent2Color);} .jr_theme .input-success .feedback-form { color: var(--accent2Shade4);} .jr_theme .input-success .input__validator__status { background: var(--accent2Color);} .jr_theme .input-success .input__validator__status:before { transform: rotate(45deg) translateY(-6px) translateX(16px);} .jr_theme .input-success .input__validator__status:after { height: 7px; transform: rotate(-45deg) translateY(16px) translateX(-5px);} .jr_theme .feedback-form { margin-top: 5px; color: var(--neutralShade6);} */ /*badges*/ /*.jr_theme .badge { display: inline-block; padding: 6px 12px; border-radius: 50px; font-weight: 500; text-transform: uppercase; margin: 5px 10px 5px 0; line-height: 1;} .jr_theme .alert { margin-bottom: 15px; display: block; padding: 10px 15px; border-radius: var(--borderRadius); font-weight: 500; position: relative; cursor: pointer;} .jr_theme .alert:before, .jr_theme .alert:after { content: ""; position: absolute; width: 4px; height: 16px; border-radius: 40px; right: 30px; top: 8px;} .jr_theme .alert:before { transform: rotate(45deg) translateY(-5.5px) translateX(13.5px);} .jr_theme .alert:after { transform: rotate(-45deg) translateY(13.5px) translateX(5.5px);} .jr_theme .status-primary { background: var(--jr_couleur_succes_fond); color: var(--jr_couleur_succes);} .jr_theme .status-primary:before, .jr_theme .status-primary:after { background: var(--jr_couleur_succes_fond);} .jr_theme .status-secondary { background: var(--secondaryShade1); color: var(--secondaryShade5);} .jr_theme .status-secondary:before, .jr_theme .status-secondary:after { background: var(--secondaryShade4);} .jr_theme .status-info { background: var(--accentShade1); color: var(--accentShade4);} .jr_theme .status-info:before, .jr_theme .status-info:after { background: var(--accentShade4);} .jr_theme .status-success { background: var(--accent2Shade1); color: var(--accent2Shade4);} .jr_theme .status-success:before, .jr_theme .status-success:after { background: var(--accent2Shade4);} .jr_theme .status-error { background: var(--accent3Shade1); color: var(--accent3Shade4);} .jr_theme .status-error:before, .jr_theme .status-error:after { background: var(--accent3Shade4);} */ /*tooltips*/ /*.jr_theme .tooltip { cursor: pointer; position: relative; display: block; width: 100%; text-align: center; z-index: 10;} .jr_theme .tooltip span { border-bottom: 1px dotted;} .jr_theme .tooltip:after { content: attr(data-tooltip); background: var(--neutralShade2); max-width: 90%; width: auto; position: absolute; left: 0; right: 0; margin: auto; opacity: 0; height: auto; font-size: 14px; padding: 10px; border-radius: var(--borderRadius); color: var(--jr_couleur_texte); text-align: center;} .jr_theme .tooltip.dark:after { background: var(--neutralShade7); color: var(--jr_couleur_texte);} .jr_theme .tooltip.top:after { bottom: 80%; transition: opacity 0.3s ease 0.3s, bottom 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;} .jr_theme .tooltip.top:hover:after, .jr_theme .tooltip.top.hovered:after { bottom: 130%; opacity: 1;} .jr_theme .tooltip.bottom:after { top: 80%; transition: opacity 0.3s ease 0.3s, top 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;} .jr_theme .tooltip.bottom:hover:after, .jr_theme .tooltip.bottom.hovered:after { top: 130%; opacity: 1;} */ /*spinner*/ /*.jr_theme .spinner + label { font-size: 14px; font-weight: 500; margin-top: 8px; display: inline-block; text-transform: uppercase; color: var(--jr_couleur_bouton);} .jr_theme .spinner-1 .spinner { max-width: 50px; margin: auto; height: 20px; position: relative;} .jr_theme .spinner-1 .spinner:after { content: ""; position: absolute; width: 20px; height: 20px; left: -10%; background: var(--jr_couleur_bouton); animation: spinnerLeftRight 0.6s infinite;} .jr_theme .spinner-1 .spinner:before { content: ""; position: absolute; width: 20px; height: 20px; left: -10%; background: var(--primaryShade2); opacity: 1; animation: spinnerLeftRight 0.6s infinite 0.06s;} .jr_theme .spinner-2 .spinner { width: 90%; margin: auto; height: 10px; background: var(--neutralShade2); border-radius: 40px; position: relative;} .jr_theme .spinner-2 .spinner:before { content: ""; border-radius: inherit; position: absolute; width: 10%; height: 100%; left: 0; background: var(--jr_couleur_bouton); opacity: 1; animation: spinnerFill 5s infinite;} @keyframes spinnerLeftRight { 0% { left: 85%;} 50% { left: -10%;} 100% { left: 85%;}} @keyframes spinnerFill { 0% { width: 2%;} 50%, 100% { width: 100%;}} @media (max-width: 992px) { .jr_themes { grid: repeat(9, fit-content(300px)) / 100%; grid-template-areas: "colors" "typography" "buttons" "links" "inputs" "badges" "tooltips" "alerts" "loading"; } .jr_themes > section:not(:last-child) { border: 1px solid var(--accentColor); border-width: 0 0 1px;} .jr_themes > section:last-child { border-width: 0;} .jr_theme .typography, .jr_theme .buttons-wrapper { padding-bottom: 40px;} .jr_theme .tooltips { padding-bottom: 60px;} .jr_theme .inputs-selects .inputs, .jr_theme .inputs-selects .textarea-select { grid-column: span 6;} .jr_theme .inputs-selects .toggle-buttons, .jr_theme .inputs-selects .checkboxes, .jr_theme .inputs-selects .radio-buttons { grid-column: span 3;} } */ /*variations*/ /*.jr_couleurs_themes input.variation { display: none;} .jr_couleurs_themes input.variation + label { display: inline-block; width: 50px; height: 50px; margin: 30px 20px 0; border-radius: 50%; cursor: pointer; border: 6px solid #fff; box-shadow: 0 0 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);} @media (min-width: 500px) { .jr_couleurs_themes input.variation + label { margin: 70px 20px 20px;}} #bluepurple + label { background: linear-gradient(to left, #673ab7 50%, #03a9f4 50%);} #sunset + label { background: linear-gradient(to right, #ff9557 50%, #ffcc67 50%);} #godiva + label { background: linear-gradient(to right, #a05793 50%, #a3d858 50%);} #dark + label { background: linear-gradient(to right, #367bc3 50%, #38bfa7 50%);} #pinkaru + label { background: linear-gradient(to right, #f95794 50%, #323da5 50%);} #dark:checked h6.subheader, #pinkaru:checked h6.subheader, #dark:checked .feedback-form, #pinkaru:checked .feedback-form { color: var(--neutralShade1);} #dark:checked::placeholder, #pinkaru:checked ::placeholder { color: var(--neutralShade4); opacity: 1;} #dark:checked .tooltip:after, #pinkaru:checked .tooltip:after { color: var(--jr_couleur_fond_boite);} #dark:checked a.button, #pinkaru:checked a.button, #dark:checked input.button, #pinkaru:checked input.button, #dark:checked button, #pinkaru:checked button, #dark:checked .tooltip.dark:after, #pinkaru:checked .tooltip.dark:after { color: var(--jr_couleur_texte); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);} #dark:checked .button:active, #pinkaru:checked .button:active, #dark:checked .button.active, #pinkaru:checked .button.active { background: var(--primaryShade1);} #dark:checked .button.secondary:active, #pinkaru:checked .button.secondary:active, #dark:checked .button.secondary.active, #pinkaru:checked .button.secondary.active { background: var(--secondaryShade1);} #dark:checked .button.accent, #pinkaru:checked .button.accent { background: var(--accentShade2);} #dark:checked .button.accent:active, #pinkaru:checked .button.accent:active { background: var(--accentShade1);} #dark:checked .button.accent2, #pinkaru:checked .button.accent2 { background: var(--accent2Shade2);} #dark:checked .button.accent2:active, #pinkaru:checked .button.accent2:active { background: var(--accent2Shade1);} #dark:checked .button.accent3, #pinkaru:checked .button.accent3 { background: var(--accent3Shade2);} #dark:checked .button.accent3:active, #pinkaru:checked .button.accent3:active { background: var(--accent3Shade1);} #dark:checked a.link, #pinkaru:checked a.link { color: var(--neutralShade2);} #dark:checked a.link:hover, #pinkaru:checked a.link:hover, #dark:checked a.link.hover, #pinkaru:checked a.link.hover { color: var(--neutralShade1); border-bottom: 2px solid;} #dark:checked a.link.primary, #pinkaru:checked a.link.primary { color: var(--jr_couleur_bouton);} #dark:checked a.link.primary:hover, #pinkaru:checked a.link.primary:hover, #dark:checked a.link.primary.hover, #pinkaru:checked a.link.primary.hover { color: var(--jr_couleur_lien_survol);} #dark:checked a.link.secondary, #pinkaru:checked a.link.secondary { color: var(--secondaryShade4);} #dark:checked a.link.secondary:hover, #pinkaru:checked a.link.secondary:hover, #dark:checked a.link.secondary.hover, #pinkaru:checked a.link.secondary.hover { color: var(--secondaryShade5);} .jr_theme.dark h1, .jr_theme.dark h2, .jr_theme.dark h3, .jr_theme.dark h4, .jr_theme.dark h5, .jr_theme.dark h6, .jr_theme.dark{color: #f1f2eb; border-color: #f1f2eb;} */ /* --ui-accent-color: #2271b1; --ui-accent-hover-color: #1d6197; palette de base : --theme-palette-color-1: #a05793; palette de base : --theme-palette-color-2: #925086; palette de base : --theme-palette-color-3: #4d5d6d; palette de base : --theme-palette-color-4: #102136; palette de base : --theme-palette-color-5: #E7EBEE; palette de base : --theme-palette-color-6: #a3d858; palette de base : --theme-palette-color-7: #FBFBFC; palette de base : --theme-palette-color-8: #ffffff; texte de base/ fil ariane : --theme-text-color: var(--theme-palette-color-3); lien / fil ariane : --theme-link-initial-color: var(--theme-palette-color-1); lien survol / fil ariane: --theme-link-hover-color: var(--theme-palette-color-2); bordures general : --theme-border-color: var(--theme-palette-color-5); titres H1-H6: --theme-headings-color: var(--theme-palette-color-4); titre H1 : --theme-heading-1-color: var(--theme-palette-color-3); titre H2 : --theme-heading-2-color: var(--theme-palette-color-3); titre H3 : --theme-heading-3-color: var(--theme-palette-color-3); titre H4 : --theme-heading-4-color: var(--theme-palette-color-3); titre H5 : --theme-heading-5-color: var(--theme-palette-color-3); titre H6 : --theme-heading-6-color: var(--theme-palette-color-3); bordure formulaire : --theme-form-field-border-initial-color: var(--theme-border-color); bordure formulaire focus : --theme-form-field-border-focus-color: var(--theme-palette-color-1); bouton texte : --theme-button-text-initial-color: #ffffff; bouton texte hover: --theme-button-text-hover-color: #ffffff; bouton background : --theme-button-background-initial-color: var(--theme-palette-color-1); bouton background survol: --theme-button-background-hover-color: var(--theme-palette-color-2); --quantity-arrows-initial-color: var(--theme-text-color); */ /* theme-palette-color-1 : lien (blocksy) theme-palette-color-2 : survol lien (blocksy) theme-palette-color-3 : texte général (blocksy) theme-palette-color-4 : tous les titres (blocksy) / titre 1 (jr) theme-palette-color-5 : bordure (blocksy) / fond badge (jr) theme-palette-color-6 : fond des boites (blocksy) theme-palette-color-7 : fond global (blocksy) theme-palette-color-8 : fond du header (blocksy) theme-palette-color-9 : titre 1 (jr) theme-palette-color-10 : titre 2 (jr) theme-palette-color-11 : titre 3 (jr) theme-palette-color-12 : titre 4 (jr) theme-palette-color-13 : titre 5 (jr) theme-palette-color-14 : titre 6 (jr) theme-palette-color-15 : trait séparateur / lien secondaire (jr) theme-palette-color-16 : survol lien secondaire (jr) theme-palette-color-17 : texte bouton / badge (jr) */ .blocksy{ --jr_couleur_lien: var(--theme-link-initial-color); --jr_couleur_lien_sombre: #a05793; --jr_couleur_lien_survol: var(--theme-link-hover-color); --jr_couleur_lien_survol_sombre: #925086; --jr_couleur_texte: var(--theme-text-color); --jr_couleur_texte_sombre: #ffffff; --jr_couleur_titre_1: var(--theme-heading-1-color); --jr_couleur_titre_1_sombre: #ffffff; --jr_couleur_titre_2: var(--theme-heading-2-color); --jr_couleur_titre_2_sombre: #ffffff; --jr_couleur_titre_3: var(--theme-heading-3-color); --jr_couleur_titre_3_sombre: #ffffff; --jr_couleur_titre_4: var(--theme-heading-4-color); --jr_couleur_titre_4_sombre: #ffffff; --jr_couleur_titre_5: var(--theme-heading-5-color); --jr_couleur_titre_5_sombre: #ffffff; --jr_couleur_titre_6: var(--theme-heading-6-color); --jr_couleur_titre_6_sombre: #ffffff; --jr_couleur_bordure: var(--theme-border-color); --jr_couleur_bordure_sombre: #E7EBEE; --jr_couleur_bordure_formulaire: var(--theme-form-field-border-initial-color); --jr_couleur_bordure_formulaire_sombre: #E7EBEE; --jr_couleur_bordure_formulaire_actif: var(--theme-form-field-border-focus-color); --jr_couleur_bordure_formulaire_actif_sombre: #E7EBEE; --jr_couleur_texte_bouton: var(--theme-button-text-initial-color); --jr_couleur_texte_bouton_sombre: #ffffff; --jr_couleur_texte_bouton_survol: var(--theme-button-text-hover-color); --jr_couleur_texte_bouton_survol_sombre: #ffffff; --jr_couleur_bouton: var(--theme-button-background-initial-color); --jr_couleur_bouton_sombre: #ffffff; --jr_couleur_bouton_survol: var(--theme-button-background-hover-color); --jr_couleur_bouton_survol_sombre: #ffffff; --jr_couleur_fond: var(--theme-palette-color-7); --jr_couleur_fond_sombre: #202020; --jr_couleur_fond_formulaire: var(--theme-palette-color-6); --jr_couleur_fond_formulaire_sombre: #303030; --jr_couleur_fond_boite: var(--theme-palette-color-6); --jr_couleur_fond_boite_sombre: #303030; --jr_couleur_infos_fond: #ffffff; --jr_couleur_infos: #ffffff; --jr_couleur_succes_fond: #ffffff; --jr_couleur_succes: #ffffff; --jr_couleur_attention_fond: #ffffff; --jr_couleur_attention: #ffffff; --jr_couleur_erreur_fond: #ffffff; --jr_couleur_erreur: #ffffff; --jr_couleur_badge_fond: color-mix(in srgb, var(--theme-border-color), transparent 30%); --jr_couleur_badge: var(--theme-palette-color-17, #ffffff); } /*.blocksy{ --jr_couleur_fond: var(--theme-palette-color-8); --jr_couleur_fond_boite: var(--theme-palette-color-7); --jr_couleur_texte: var(--theme-text-color); --jr_couleur_bouton: var(--theme-palette-color-1); --primaryShade1: #ffe2d1; --primaryShade2: #ffceb2; --primaryShade3: #ffb184; --jr_couleur_bouton_survol: var(--theme-button-background-hover-color); --jr_couleur_lien_survol: #d17a48; --jr_couleur_bordure: var(--theme-palette-color-6); --secondaryShade1: #fff1d5; --secondaryShade2: #ffde9e; --secondaryShade3: #ffd074; --secondaryShade4: #e8ba5e; --secondaryShade5: #ba954b; --accentColor: #4e5166; --accentShade1: #cecfd5; --accentShade2: #aeafb9; --accentShade3: #8e909d; --accentShade4: #6e7081; --accentShade5: #404354; --accent2Color: #588b8b; --accent2Shade1: #c2d4d4; --accent2Shade2: #a3bfbf; --accent2Shade3: #85aaaa; --accent2Shade4: #507f7f; --accent2Shade5: #497272; --accent3Color: #fe5f55; --accent3Shade1: #fec4c1; --accent3Shade2: #fea7a2; --accent3Shade3: #fe7c73; --accent3Shade4: #e7574e; --accent3Shade5: #b9463e; } .bluepurple{ --jr_couleur_fond_boite: #fff; --jr_couleur_texte: #111; --jr_couleur_bouton: #03a9f4; --primaryShade1: #e1f5fe; --primaryShade2: #b3e5fc; --primaryShade3: #4fc3f7; --jr_couleur_bouton_survol: #0288d1; --jr_couleur_lien_survol: #0277bd; --jr_couleur_bordure: #673ab7; --secondaryShade1: #ede7f6; --secondaryShade2: #d1c4e9; --secondaryShade3: #9575cd; --secondaryShade4: #512da8; --secondaryShade5: #311b92; --accentColor: #009688; --accentShade1: #e0f2f1; --accentShade2: #b2dfdb; --accentShade3: #4db6ac; --accentShade4: #00796b; --accentShade5: #004d40; --accent2Color: #8bc34a; --accent2Shade1: #e7f6d5; --accent2Shade2: #c5e1a5; --accent2Shade3: #aed581; --accent2Shade4: #689f38; --accent2Shade5: #558b2f; --accent3Color: #f44336; --accent3Shade1: #ffdde0; --accent3Shade2: #ffcdd2; --accent3Shade3: #ef9a9a; --accent3Shade4: #d32f2f; --accent3Shade5: #b71c1c; } .sunset { --jr_couleur_fond: #f9f9f9; --jr_couleur_fond_boite: #fff; --jr_couleur_texte: #111; --jr_couleur_bouton: #ff9557; --primaryShade1: #ffe2d1; --primaryShade2: #ffceb2; --primaryShade3: #ffb184; --jr_couleur_bouton_survol: #e88850; --jr_couleur_lien_survol: #d17a48; --jr_couleur_bordure: #ffcc67; --secondaryShade1: #fff1d5; --secondaryShade2: #ffde9e; --secondaryShade3: #ffd074; --secondaryShade4: #e8ba5e; --secondaryShade5: #ba954b; --accentColor: #4e5166; --accentShade1: #cecfd5; --accentShade2: #aeafb9; --accentShade3: #8e909d; --accentShade4: #6e7081; --accentShade5: #404354; --accent2Color: #588b8b; --accent2Shade1: #c2d4d4; --accent2Shade2: #a3bfbf; --accent2Shade3: #85aaaa; --accent2Shade4: #507f7f; --accent2Shade5: #497272; --accent3Color: #fe5f55; --accent3Shade1: #fec4c1; --accent3Shade2: #fea7a2; --accent3Shade3: #fe7c73; --accent3Shade4: #e7574e; --accent3Shade5: #b9463e; } .godiva { --jr_couleur_fond: #f9f9f9; --jr_couleur_fond_boite: #fff; --jr_couleur_texte: #111; --jr_couleur_bouton: #a05793; --primaryShade1: #e5d1e1; --primaryShade2: #d3b2cd; --primaryShade3: #b984b0; --jr_couleur_bouton_survol: #925086; --jr_couleur_lien_survol: #834879; --jr_couleur_bordure: #a3d858; --secondaryShade1: #e5f4d1; --secondaryShade2: #cce9a3; --secondaryShade3: #bce285; --secondaryShade4: #95c550; --secondaryShade5: #779e41; --accentColor: #245e71; --accentShade1: #d7e1e5; --accentShade2: #afc4cb; --accentShade3: #7398a4; --accentShade4: #4b7b8a; --accentShade5: #1e4d5d; --accent2Color: #2aa5a1; --accent2Shade1: #d8eeed; --accent2Shade2: #9ed6d4; --accent2Shade3: #64bdba; --accent2Shade4: #279693; --accent2Shade5: #1f7976; --accent3Color: #92374d; --accent3Shade1: #ebdad3; --accent3Shade2: #cda4ae; --accent3Shade3: #af6d7d; --accent3Shade4: #853246; --accent3Shade5: #6b2939; } .dark { --jr_couleur_fond: #2a313b; --jr_couleur_fond_boite: #2a313b; --jr_couleur_texte: #ebe8d8; --jr_couleur_bouton: #367bc3; --jr_couleur_lien_survol: #b5cfe9; --jr_couleur_bouton_survol: #91b7de; --primaryShade3: #5a93cd; --primaryShade2: #3270b2; --primaryShade1: #285a8e; --jr_couleur_bordure: #38bfa7; --secondaryShade5: #c8ede7; --secondaryShade4: #92dccf; --secondaryShade3: #6ed0be; --secondaryShade2: #33ae98; --secondaryShade1: #2e9d89; --accentColor: #586994; --accentShade5: #d1d6e1; --accentShade4: #a3adc4; --accentShade3: #7684a7; --accentShade2: #49567a; --accentShade1: #39435f; --accent2Color: #8fe1a2; --accent2Shade5: #d6f4dd; --accent2Shade4: #c1eecc; --accent2Shade3: #a3e6b2; --accent2Shade2: #82cd94; --accent2Shade1: #76b985; --accent3Color: #fe938c; --accent3Shade5: #fee1df; --accent3Shade4: #fec4c0; --accent3Shade3: #fea6a0; --accent3Shade2: #e78680; --accent3Shade1: #b96b66; color: #f1f2eb; border-color: #f1f2eb; } .pinkaru { border-color: #fff; --jr_couleur_fond: #2a313b; --jr_couleur_fond_boite: #2a313b; --jr_couleur_texte: #e3f2fd; --jr_couleur_bouton: #f95794; --jr_couleur_lien_survol: #fdd1e1; --jr_couleur_bouton_survol: #fba3c4; --primaryShade3: #fa75a7; --primaryShade2: #e35087; --primaryShade1: #b6406c; --jr_couleur_bordure: #323da5; --secondaryShade5: #c7cae6; --secondaryShade4: #8f95cd; --secondaryShade3: #6971bd; --secondaryShade2: #2e3896; --secondaryShade1: #293288; --accentColor: #ffc729; --accentShade5: #ffefc4; --accentShade4: #ffe08a; --accentShade3: #ffd14f; --accentShade2: #e8b526; --accentShade1: #d1a322; --accent2Color: #53dd6c; --accent2Shade5: #d0f5d6; --accent2Shade4: #a1ecae; --accent2Shade3: #72e386; --accent2Shade2: #4cc963; --accent2Shade1: #3da14f; --accent3Color: #f52f57; --accent3Shade5: #fcc6d1; --accent3Shade4: #f98da3; --accent3Shade3: #f65475; --accent3Shade2: #df2b50; --accent3Shade1: #b32340; } */ @media (min-width: 768px) {.jr_masonry {--gap: 16; --col-width: 229;}} @media (min-width: 1024px) {.jr_masonry {--gap: 24; --col-width: 300;}} @media (min-width: 1280px) {.jr_masonry {--gap: 24; --col-width: 394;}} @media (min-width: 768px) {.jr_masonry { --_col-width: var(--col-width, 280); --_col-width-px: calc(var(--_col-width) * 1px); --_gap: calc(var(--gap, 20) * 1px); display: var(--display, grid); grid-template-columns: repeat(auto-fill, minmax(var(--_col-width-px), 1fr)); grid-auto-rows: 1px; column-gap: var(--_gap);} /* Calc img height according column width and image aspect ratio. [Image-Height] * [Column-Width] / [Image-Width] = [X] */ .jr_masonry_item { --img-proportional-height: calc(var(--h) * var(--_col-width) / (var(--w))); grid-row-end: span var(--img-proportional-height, 240); overflow: hidden;} .jr_masonry_item:not(:last-child) { margin-bottom: var(--_gap);} .jr_masonry_img { width: 100%; height: auto; object-fit: cover;} }