/** * @file * Subtheme specific CSS. */ /* body::after { content: ""; position: absolute; top: 0; left: 100vw; width: 10px; height: 100vh; background: var(--rouge); } */ :root { --rouge: #f2270e; --rouge-fonce: #bc271c; --bg-confirme: #339933; --bg-ouvert: #86ba86; --bg-complet: #a486ad; --bg-projet: #a3a3a3; --marge-verticale: 1.5rem; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } /* permet d'avoir un scroll plus doux */ html, body { margin: 0; padding: 0; overflow-x: clip; /* empêche tout débordement horizontal */ } #page, #main-wrapper, .region-primary-menu .menu-item a.is-active, .region-primary-menu .menu-item--active-trail a { background-color: #1C5E71 !important; } h1, .h1 { font-weight: bold; padding: 0.3rem 0.5rem; color: #FFFFFF !important; } @media screen and /* (min-width: 576px) and */ (max-width: 1200) { #content section.section h1 { padding: 0.3rem 0.5rem; } } @media screen and (min-width: 1201px){ #content section.section h1 { padding: 0; } } .node--type-trek h1.title { font-size: 2rem !important; line-height: 1.8rem; padding: 0 1rem; } @media screen and (min-width: 576px) { .node--type-trek h1.title { padding: 0; margin: 1rem 0 2.5rem 0; font-size: 3rem !important; line-height: 2.8rem; } } /** MCR ***/ @media screen and (max-width: 576px) { #main { /* border: 10px solid aqua; */ padding: 0!important; } } /* NAV BAR */ #navbar-main { padding: 5px 5px 0 0 !important; border-bottom: 2px solid #000; display: flex !important; justify-content: space-between; /* FIXER LA NAVBAR */ top: 0; width: 100% !important; z-index: 9999 !important; position: fixed; } @media screen and (min-width: 1300px) { /* #block-itak-barrio-menutop div.icones.menu */ #block-itak-barrio-menutop .content { width: 900px; /* background-color: aqua; */ } } .toast-container { z-index: 10000; } #main-wrapper { margin-top: 65px; } @media screen and (min-width: 576px) { #main-wrapper { margin-top: 100px; } } #header { margin-bottom: 1rem; } /* BRANDING */ .navbar-brand { display: flex; /* align-items: center; */ margin-left: 0.8em; } .navbar-brand img { height: 60px; /* border: 1px solid aqua; */ } .navbar-brand div.nom-site { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: flex-start; margin-left: 0.6rem; /* border: 1px solid aqua; */ } .navbar-brand div.nom-site span { display: block; padding: 0; margin: 0; font-size: 1.9rem; /* border: 1px solid #f2270e; */ } .navbar-brand div.nom-site span.guides { /* color: #f2270e; */ color: var(--rouge); font-family: 'Roboto Condensed', sans-serif; font-weight: bold; margin-top: -5px; } .navbar-brand div.nom-site span.direct { margin-top: -17px; } @media screen and (max-width: 576px) { #header { margin-bottom: 1rem; } #navbar-main { padding: 3px 5px 0 0 !important; } .navbar-brand { margin-left: 0.5em; } .navbar-brand img { height: 40px; } .navbar-brand div.nom-site { margin-top: 4px; margin-left: 0.3rem; } .navbar-brand div.nom-site span { display: block; padding: 0; margin: 0; font-size: 1.2rem; } .navbar-brand div.nom-site span.direct { margin-top: -12px; } } /* MENU */ #block-itak-barrio-menutop { min-width: 60%; /* la largeur du menu */ /* border: 1px solid red; */ } #block-itak-barrio-menutop div.icones.menu { display: flex; flex-wrap: nowrap; justify-content: space-around; align-items: center; /* background-color: aqua; */ } #block-itak-barrio-menutop div.icones.item { } #block-itak-barrio-menutop div.icones.item a { display: flex; flex-direction: column; justify-content: center; align-items: center; /* border: 2px solid aqua; */ } #block-itak-barrio-menutop div.icones.item a:link, #block-itak-barrio-menutop div.icones.item a:visited, #block-itak-barrio-menutop div.icones.item a:hover, #block-itak-barrio-menutop div.icones.item a:active { text-decoration: none; color: var(--rouge); } #block-itak-barrio-menutop div.icones.svg { width: 50px; height: 50px; /* background-color: gray; */ } @media screen and (max-width: 576px) { #block-itak-barrio-menutop { max-width: 90%; /* la largeur du menu */ margin-left: -10px; /* border: 1px solid aqua; */ } #block-itak-barrio-menutop div.icones.svg { width: 30px; height: 30px; } #block-itak-barrio-menutop div.icones.texte { display: none; } } #block-itak-barrio-menutop > div > div > div { min-width: 35px; padding: 0.05rem 0.2rem; border: 1px solid #FFFFFF; } @media screen and (min-width: 576px) { #block-itak-barrio-menutop > div > div > div { min-width: 90px; } } /* #navbar-main.scrolled div.icones.menu .icones.item */ #block-itak-barrio-menutop > div > div > div:hover { padding: 0.05rem 0.2rem; border: 1px solid var(--rouge); border-radius: 5px; } @media screen and (max-width: 400px){ #navbar-main.scrolled div.icones.menu .icones.item { min-width: 35px; /* background-color: aqua; */ } } body.page-node-92 #block-itak-barrio-menutop > div > div > div:nth-child(1), body.page-node-55 #block-itak-barrio-menutop > div > div > div:nth-child(2), body.page-node-98 #block-itak-barrio-menutop > div > div > div:nth-child(3), body.page-node-93 #block-itak-barrio-menutop > div > div > div:nth-child(4) { border: 1px solid var(--rouge); border-radius: 5px; } /* fin de MENU */ /* fin de BRANDING */ body.page-user-logout #content { min-height: 25vh; } body.page-user-logout #user-logout-confirm { margin: 3rem 1.5rem; /* border: 1px solid aqua; */ } /* =============== BOUTONS ===================== */ button.btn.btn-primary { background-color: var(--rouge); color: #ffffff; font-weight: bold; border: none; } div.btn-mes-autres-treks { background-color: var(--rouge); font-weight: bold ; display: inline-block; font-weight: bold; line-height: 1.5; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: 0.375rem; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; border: 1px solid transparent; } div.btn-mes-autres-treks a:link, div.btn-mes-autres-treks a:visited { color: #ffffff !important; text-decoration: none; } div.btn-mes-autres-treks a:hover, div.btn-mes-autres-treks a:active { color: #ffffff !important; text-decoration: none; background-color: var(--rouge-fonce); } div.btn-mes-autres-treks:hover { background-color: var(--rouge-fonce); } /* -------- Bouton annuler --------- */ body.page-user-logout #edit-cancel { color: #fff; background-color: #212529; border-color: #212529; } /* #edit-cancel:hover { color: #fff; background-color: #1c1f23; border-color: #1a1e21; } #edit-cancel:focus, #edit-cancel.focus { box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); } #edit-cancel.disabled, #edit-cancel:disabled { color: #fff; background-color: #212529; border-color: #212529; } #edit-cancel:not(:disabled):not(.disabled):active, #edit-cancel:not(:disabled):not(.disabled).active, .show > #edit-cancel.dropdown-toggle { color: #fff; background-color: #1a1e21; border-color: #191c1f; } #edit-cancel:not(:disabled):not(.disabled):active:focus, #edit-cancel:not(:disabled):not(.disabled).active:focus, .show > #edit-cancel.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); } */ body.page-user-logout #edit-cancel { display: inline-block; font-weight: 400; line-height: 1.5; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: 0.375rem; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; border: 1px solid transparent; } /* -------- fin de Bouton annuler --------- */ /* =============== fin de BOUTONS ===================== */ /* fin de NAV BAR */ /* ================================================ TREK ============================================== */ /* TREK ADMIN-NAV */ body.user-logged-in.node--type-trek nav.tabs { margin-bottom: 1rem; margin-top: 4rem !important; } /* fin de TREK ADMIN-NAV */ /* TREK > STICKY */ .node--type-trek div.content article { /* permet de fixer la bande noire sous la navbar */ /* border: 1px solid var(--rouge); */ /* position: relative; */ margin-top: -45px; min-height: 100vh; /* ou height: auto; selon ton layout */ } .node--type-trek #sticky { position: sticky !important; top:57px; z-index: 1000; width: 100vw; /* Largeur égale à 100% de la fenêtre */ margin-left: calc(-50vw + 50%); /* Centre l'élément par rapport à la fenêtre */ left: 0; /* Aligne à gauche de la fenêtre */ display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; padding: 0.5rem 1rem 0.5rem 0.5rem; /* border: 2px solid aqua; */ } .node--type-trek #sticky .titre-bandeau { color: #FFFFFF; font-weight: 600; max-width: 60%; padding-left: 1rem; font-size: clamp(1.2rem, 2.5vw, 2.5rem); } @media screen and (max-width: 575px) { .node--type-trek #sticky .titre-bandeau { display: none; } } .node--type-trek #sticky .btn-resa-ft { display: flex; flex-wrap: wrap; gap: 0 1rem; } .node--type-trek #sticky, .node--type-trek .bandeau-ft { background-color: #292929; /* = la couleur du footer */ } .node--type-trek #sticky .ft-resa, .node--type-trek .bandeau-ft .ft-resa { gap: 0.3rem; /* border: 1px solid aqua; */ } .node--type-trek #sticky .departs-dates-resa-wrapper, .node--type-trek .bandeau-ft .departs-dates-resa-wrapper { flex-direction: column; color: #FFFFFF; } @media screen and (max-width: 769px) { .node--type-trek .bandeau-ft { display: none !important; /* border: 1px solid aqua; */ } } @media screen and (min-width: 769px) { /* .node--type-trek #sticky, .node--type-trek .bandeau-ft { top:85px; } */ .node--type-trek #sticky { top: 50px; padding-top: 1.1rem; padding-bottom: 0.5rem; /* décolle le logo activité de la navbar avant scroll */ } .node--type-trek #sticky .important-wrapper, .node--type-trek #sticky .ft-resa, .node--type-trek .bandeau-ft .ft-resa, .node--type-trek .bandeau-ft .important-wrapper { gap :3rem; } .node--type-trek #sticky .departs-dates-resa-wrapper, .node--type-trek .bandeau-ft .departs-dates-resa-wrapper { flex-direction: row; align-items: center; gap: 0.5rem; /* border: 1px solid aqua; */ } .node--type-trek #sticky .departs-dates-resa-wrapper .intervalle-date-fin, .node--type-trek .bandeau-ft .departs-dates-resa-wrapper .intervalle-date-fin { margin: 0!important; } } /* rend l'admin plus facile sans barre sticky => permet d'afficher les liens "modifier / cloner" */ body.user-logged-in .node--type-trek #sticky { position: initial !important; } /* BTN RESA */ span.btn-resa a{ display: inline-block; padding: 0.15rem 0.25rem; font-size: 1rem; line-height: 1.3333333; border-radius: 6px; color:#ffffff; background-color: #24b572; text-decoration: none; text-align: center; font-weight: bold; border: 1px solid #FFFFFF; } span.btn-resa a:hover{ color: #ffffff; background-color: #198754; text-decoration: none; } span.btn-resa a:before { content: ""; display: inline-block; width: 1rem; height: 1rem; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-size: contain; vertical-align: middle; margin-right: 0.3rem; } @media screen and (min-width: 576px) { .node--type-trek #sticky span.btn-resa a { padding: 0.3rem 0.5rem; font-size: 1.2rem; /* font-weight: bold; */ } } /* fin de BTN RESA */ /* fin de STICKY */ /* CARTES REGION-FEATURED */ section.region-featured-top { margin-top: 1em; display:flex; flex-wrap: wrap; } section.region-featured-top div.block{ flex: 1; /* Les éléments ont la même largeur */ min-width: 0; /* Pour éviter que les éléments ne rétrécissent pas en dessous de leur contenu */ } section.region-featured-top div.block:first-child { margin-right: 5px; /* Supprime la marge droite des div */ } @media screen and (max-width: 576px) { /* Utilisation de max-width au lieu de min-width */ section.region-featured-top { flex-direction: column; /* Change la direction de l'axe principal en vertical */ } section.region-featured-top div.block { flex-basis: auto; /* Annule la largeur spécifiée dans le cas où elle serait définie */ } section.region-featured-top div.block:first-child { margin: 0 0 5px 0; /* passe la marge de droite en LARGE à marge dessous en EXTRA SMALL */ } } /* FIN de CARTES REGION-FEATURED */ /* TREK SYNTHESE */ div.highlighted aside.section { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: stretch; align-content: stretch; } div.highlighted aside.section .etiquette.prochains-departs { font-size: 1.5em; font-weight: bold; } div.highlighted aside.section .sejour.prix.mini { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: center; align-content: stretch; } /* fin de TREK SYNTHESE */ .node--type-trek div.node__content { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; /* border: 2px solid aqua; */ } .node--type-trek .sejour.prix.mini .label.prix.mini { font-weight: normal; } .node--type-trek .sejour.prix.mini .valeur.prix.mini { font-size: 2em; font-weight: bold; } .node--type-trek .paragraph--type--inscription { max-width: 768px; display: flex; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; align-content: normal; margin-bottom: 0.2em; /* border: 5px solid aqua; */ } .node--type-trek .paragraph--type--inscription > div { margin-right: 0.5em; } .node--type-trek .paragraph--type--inscription div.statut.field__item { /* min- */width: 140px; background-color: rgb(226, 226, 226); } /* PLACES LIBRES */ .node--type-trek .paragraph--type--inscription .places-libres { margin-right: 0; display: flex; flex-grow: 1; flex-shrink: 1; flex-basis: auto; justify-content: flex-end; align-self: auto; order: 0; text-align: left; /* background-color: rgb(232, 233, 202); */ } .node--type-trek .paragraph--type--inscription .places-libres .texte { width: 110px; margin-right: 0; /* border: 1px solid var(--rouge); */ /* margin: 0.2em; */ } .node--type-trek .paragraph--type--inscription .places-libres .place { display: inline-block; background-color: #8bc34a; border-radius: 50%; color: #000000; font-weight: bold; padding: 0 0.4rem; position: relative; } .node--type-trek .paragraph--type--inscription .places-libres .place::before { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; animation: pulse 1.5s ease 0s infinite; border-radius: 50%; border: 4px double #8bc34a; } @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 30% { transform: scale(1.4); opacity: 0.6; } 100% { transform: scale(1.6); opacity: 0.2; } } /* fin de PLACES LIBRES */ /* TREK STATUT */ div.item-statut { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; margin: 0 0.2em; } span.icone-svg.statut { display: inline-block; vertical-align: middle; content: ""; background-repeat: no-repeat; width: 2rem; height: 2rem; } span.statut.tag { font-weight: bold; padding: 0.1rem 0.5rem; border-radius: 10rem; margin-left: 0.5rem; } span.statut.tag.confirme { position: relative; z-index: 1; display: inline-block; color: #000; } .statut.tag.confirme::before { content: ""; position: absolute; border-radius: 10rem; /* A CONSERVER */ top: 0; left: 0; width: 100%; height: 100%; background-color: #8bc34a; z-index: -1; animation: anibadge-confirme 1.5s ease 0s infinite normal none; } @keyframes anibadge-confirme { 0% { opacity: 1; box-shadow: 0 0 0 0 rgba(139, 195, 74, 1); } 30% { opacity: 0.4; box-shadow: 0 0 0 10px rgba(139, 195, 74, 0); } 100% { opacity: 1; box-shadow: 0 0 0 50px rgba(139, 195, 74, 0); } } /* span.icone-svg.statut.projet { background-image: url('data:image/svg+xml,xxxxxxxxxx'); } */ /* fin de TREK STATUT */ /* TREK > INSCRIPTION > PRIX */ .node--type-trek .departs-prix { /* background-color: aqua; */ flex-grow: 0; flex-shrink: 1; /* border: 1px solid aqua; */ } .node--type-trek .departs-dates-ft-wrapper { /* background-color: var(--rouge); */ flex-grow: 1; flex-shrink: 0; /* border: 1px solid var(--rouge); */ } .node--type-trek .departs-prix .inscription-prix { /* border: 1px solid aqua; */ max-height: 50px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .node--type-trek .departs-prix .inscription-prix .apartirde { letter-spacing: -1px; } .node--type-trek .departs-prix .inscription-prix .apartirde, .node--type-trek .departs-prix .inscription-prix .signe-euro { font-size: 1rem !important; font-weight: 300 !important; /* border: 1px solid red; */ } .node--type-trek .departs-prix .inscription-prix .montant-en-euros { font-size: 1.5rem; font-weight: bold; margin-left: 0.3rem; /* padding-top: 0 !important; padding-bottom: 0 !important; */ /* border: 1px solid red; */ } @media screen and (min-width: 992px) { .node--type-trek .departs-prix { /* background-color: var(--rouge); */ flex-grow: 1; flex-shrink: 0; } .node--type-trek .departs-dates-ft-wrapper { /* background-color: aqua; */ flex-grow: 2; } } /* fin de TREK > INSCRIPTION > PRIX */ .node--type-trek div.field.field--name-field-inscription.field__items > div { /* border: 1px solid aqua; */ max-width: 768px; } .node--type-trek div.field.field--name-field-inscription.field__items > div:nth-child(odd) { /* border: 1px solid var(--rouge); */ background-color: rgb(247, 247, 247); } .node--type-trek div.field.field--name-field-inscription.field__items > div:nth-child(even) { /* border: 1px solid var(--rouge); */ background-color: rgb(240, 239, 239); } .node--type-trek .paragraph--type--inscription .trek-prix { font-size: 1.3em; } .node--type-trek .paragraph--type--inscription .trek-prix::before { font-size: 0.5em; content: "à partir de "; vertical-align: middle; } .node--type-trek .paragraph--type--inscription .trek-prix::after { font-size: initial; content: "€"; } .node--type-trek .paragraph--type--inscription .trek-dates { font-size: 0.9em; } /* TREK > OG IMAGE */ .node--type-trek #image-hero > div { display: flex; justify-content: center; /* border: 1px solid var(--rouge); */ } .node--type-trek .field--type-image { margin: 0; } .node--type-trek .trek-og-image picture { display: flex; justify-content: center; /* border: 10px solid yellow; */ } /* fin de TREK > OG IMAGE */ /* TREK > ACTIVITES */ .activites.icone-svg.term749 { /* à pied */ content: url("/sites/default/files/media/svg/mobilite_pedestre.svg"); } .activites.icone-svg.term750 { /* raquette */ content: url("/sites/default/files/media/svg/mobilite_raquette.svg"); } .activites.icone-svg.term751 { /* ski alpinisme */ content: url("/sites/default/files/media/svg/activite-ski-rando-alpine.svg"); } .activites.icone-svg.term752 { /* alpinisme */ content: url("/sites/default/files/media/svg/piolet.svg"); } .activites.icone-svg.term753 { /* rando chamelière */ content: url("/sites/default/files/media/svg/mobilite_meharee.svg"); } .node--type-trek .champ-activites { width: 32px; height: 32px; background-color: #76d3d6; border-radius: 0.2rem; } .activites.icone-svg { background-repeat: no-repeat; width: 24px; height: 24px; } .activites.tag { /* text-align: center; font-size: 0.5rem; font-weight: bold; line-height: 1em; padding: 0.2em; width: 80px; */ display: none; } @media screen and (min-width: 576px){ .node--type-trek .champ-activites { width: 80px; height: 80px; } .activites.icone-svg { width: 45px; height: 45px; } .activites.tag { display: block; text-align: center; font-size: 0.5rem; font-weight: bold; line-height: 1em; padding: 0.2em; width: 80px; font-size: clamp(0.5rem, 0.8rem, 1rem); } } .node--type-trek section.guide-agence { border: 1px solid gray; margin: 1rem 0; background-color: #FFFFFF; } .node--type-trek section.guide-agence { /* display: flex; flex-direction: column; */ /* border: 5px solid yellow; */ border: 1px solid #cecece; /* background-color: #efefef; */ } .node--type-trek .presentation-guide { /* flex:1; */ /* border: 5px solid var(--rouge); */ } .node--type-trek .presentation-guide * { /* border: 1px solid aqua; */ } .node--type-trek .presentation-guide > div { /* border: 1px solid yellow; */ } .node--type-trek .presentation-guide a.username:link, .node--type-trek .presentation-guide a.username:visited, .node--type-trek .presentation-guide a.username:hover, .node--type-trek .presentation-guide a.username:active { /* color: #f2270e; */ color: var(--rouge); text-decoration: none; } .node--type-trek .presentation-guide .guide-photo { /* border: 1px solid var(--rouge); */ } /* fin de TREK ACTIVITES */ /* XXXXXXXX */ .node--type-trek .guide-infos{ display: flex; flex-wrap: nowrap; } .node--type-trek .image-style-portrait-guide-100x100 { min-width: 100px !important; } /* .node--type-trek .guide-texte > div { border: 1px solid var(--rouge); } */ .node--type-trek .guide-texte { flex-grow: 1; height: 100%; min-height: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0 0.5rem; padding: 0.2rem 0; /* border: 1px solid aqua; */ } .node--type-trek .guide-texte .sejourcreeetencadre { font-size: 1rem; font-weight: normal; } @media screen and (min-width: 768px){ .node--type-trek .guide-texte { flex-direction: row; flex-wrap: wrap; padding: 0 0.5rem; } } .node--type-trek .guide-nom { /* font-size: 1.5rem; */ /* font-size: clamp(12px, 36px + 0.5vw, 48px); */ /* min 12px max 48px base 36px */ flex-grow: 1; font-size: 1.5rem; line-height: 2.5rem; /* line-height: 1.5rem; */ font-weight: 900; text-align: center; vertical-align: middle; /* border: 1px solid var(--rouge); */ /* background-color: yellow; */ } .node--type-trek .votre-guidedetrek { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; font-weight: normal; font-size: 1.3rem; width: 100%; } /* .node--type-trek div.votre, */ .node--type-trek div.guidedetrek { margin-top: -10px; } @media screen and (min-width: 576px) { .node--type-trek div.guidedetrek { margin-top: 0; } } .node--type-trek div.guidedetrek { font-weight: 800; } .node--type-trek .guide-fiche { /* display: flex; justify-content: center */ /* height: 2.5em; margin: 0.5rem; */ } .node--type-trek .guide-fiche a { content: url("/sites/default/files/media/svg/icone_information.svg"); } @media screen and (min-width: 769px) { .node--type-trek .guide-infos { /* display: flex; flex-direction: row; flex-wrap: nowrap; */ } .node--type-trek .guide-texte { /* background-color: gray; */ /* flex-direction: row; align-items: center; */ } /* .node--type-trek .guide-nom, .node--type-trek .votre-guidedetrek { flex-grow: 2; border: 5px solid aqua; } */ .node--type-trek .guide-nom { /* line-height: 3rem; */ } /* .node--type-trek div.votre-guidedetrek { font-size: clamp(10px, 14px + 0.5vw, 20px); } */ .node--type-trek .guide-fiche { min-width: 2rem; flex-grow: 1; } } /* fin de XXXXXXXXX */ /* AGENCE */ .node--type-trek div.agence { /* background-color: #f6e3a3; */ /* display: flex; flex-wrap: nowrap; */ /* background-color: #FFFFFF; */ border-left: 1px solid #cecece; } .node--type-trek .agence-icone { width: 5rem; min-width: 80px; padding: 0.5rem 0.8rem; content: url("/sites/default/files/media/svg/icone_agence.svg"); } .node--type-trek .agence-infos { /* display: flex; flex-wrap: wrap; flex-grow: 1; justify-content: flex-start; */ align-items: center; font-size: 1.2rem; } .node--type-trek .agence-immat { } .node--type-trek .agence-nom-immat { /* flex-grow: 2; display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center; */ } /* .node--type-trek .agence-immat.label { font-size: 0.7rem; } */ /* .node--type-trek .agence-immat.texte { font-size: 0.8rem; font-weight: bold; } */ .node--type-trek .agence-nom { line-height: 1; } /* .node--type-trek .agence-marque { font-weight: 800; } */ .node--type-trek .agence-atout-france { display: none; } @media screen and (min-width: 763px) { .node--type-trek .agence-atout-france { display: block; width:83px; content: url("/sites/default/files/media/image/atout-france-logo-moitie-83px.png"); border: 3px solid #f2270e; } } /* .node--type-trek .agence-email-telephone { flex-grow: 1; display: flex; flex-wrap: nowrap; justify-content: space-evenly; align-items: center; } */ .node--type-trek .agence-email, .node--type-trek .agence-telephone { /* background-color: #f2270e; */ background-color: var(--rouge); border-radius: 50%; height: 24px; padding: 0.2rem; } .node--type-trek .agence-email { content: url("/sites/default/files/media/svg/icone_email.svg"); } .node--type-trek .agence-telephone { content: url("/sites/default/files/media/svg/icone_telephone.svg"); } /* @media screen and (min-width: 763px) { .node--type-trek .agence-email-telephone { height: 36px; } .node--type-trek .agence-email, .node--type-trek .agence-telephone { background-color: var(--rouge); border-radius: 50%; height: 36px; padding: 0.2rem; } } */ /* fin de AGENCE */ /* TREK > DEPARTS */ .node--type-trek #inscriptions { /* background-color: #292929; */ max-width: 99%; margin: 0 auto 1.5rem auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; padding-top: 0; padding-bottom: 0; } @media (min-width: 768px) { #inscriptions { padding-top: 1rem; padding-bottom: 1rem; } } .node--type-trek #inscriptions .inscription-statut-places { display: flex; flex-direction: column; justify-content: center; align-items: center; flex-shrink: 0; padding: 0; width: 135px; padding-left: 0.5rem; } .node--type-trek .intervalle-date-debut, .node--type-trek .intervalle-date-fin { font-size: 1.2rem; font-weight: bold; } .node--type-trek .intervalle-date-debut span, .node--type-trek .intervalle-date-fin span { font-size: 1rem; font-weight: normal; } .node--type-trek #inscriptions .paragraph { width: 100%; color: #FFFFFF; } .node--type-trek #inscriptions .paragraph.even { background-color: #424242; } .node--type-trek #inscriptions .paragraph.odd { background-color: #323232; } /* @media screen and (min-width: 576px){*/ .node--type-trek #inscriptions .departs-dates-debut-fin { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0.25rem; /* border: 1px solid aqua; */ } /* } */ @media screen and (min-width: 550px) { .node--type-trek #inscriptions .departs-dates-debut-fin { /* display: flex; */ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.35rem; /* padding: 0.25rem; */ /* border: 1px solid red; */ } } @media screen and (max-width: 550px){ .node--type-trek .intervalle-date-fin { margin-top: -5px; /* border: 1px solid yellow; */ } } .node--type-trek #inscriptions .paragraph .departs-statut { width: 100%; display: flex; justify-content: center; align-items: center; /* flex-grow: 1; */ font-size: 1rem; padding: 0.25rem; margin: 0.2rem 0; /* border: 1px solid red; */ } .node--type-trek #inscriptions .departs-statut-places { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; flex: 1 1 auto; } .node--type-trek #inscriptions .departs-statut-places .departs-placeslibres { margin-bottom: 0.3rem; margin-top: -5px; padding: 0 0.5rem 0 0 !important; align-self:flex-end; /* border: 1px solid aqua; */ } .node--type-trek #inscriptions .departs-statut-places .departs-placeslibres .nombre-placeslibres { font-size: 1rem; background-color: #519741; width: 45px; height: 30px; border-radius: 50rem; border: 2px solid #FFFFFF; font-weight: bold; color: #FFFFFF; text-align: center; margin-left: auto; padding: 0.1rem 1rem 0.3rem 0.9rem; } .node--type-trek #inscriptions .departs-statut-places .departs-placeslibres .texte-placeslibres { font-size: 0.8rem; font-weight: 600; } /* fin de TREK > DEPART */ /* TREK > BK INFOS 1 */ .node--type-trek #infos-1 { /* border: 1px solid aqua; */ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-items: stretch; align-content: stretch; } /* fin de TREK > INFOS 1 /* TREK > DUREE */ .node--type-trek /*#duree*/ { /* border: 1px solid var(--rouge); */ /* display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; */ /* width: 180px; */ /* margin: 0.2em 0; */ } .node--type-trek /*#duree*/ .icone-svg.prefixe { display:inline-block; vertical-align: baseline; margin: 0 0.2rem 0 0; } .node--type-trek /*#duree*/ .icone-svg.prefixe.nbjours { /* width: 3rem; height: 3rem; */ width: 55px; height: 55px; content: url("/sites/default/files/media/svg/duree_calendrier.svg"); /* border: 1px solid var(--rouge); */ } .node--type-trek /*#duree*/ .icone-svg.prefixe.nbnuits { width: 3rem; height: 3rem; content: url("/sites/default/files/media/svg/duree_nuit.svg"); margin: 0 1rem; } .node--type-trek /*#duree*/ .icone-svg.prefixe.nbjoursactivite { width: 3rem; height: 3rem; content: url("/sites/default/files/media/svg/duree_activite.svg"); margin: 0 1rem; /* background-color: var(--rouge); */ } .node--type-trek /*#duree*/ > div { font-size: 1.4rem; font-weight: bold; /* padding: 0.2rem ; */ /* border: 1px solid var(--rouge); */ } .node--type-trek /*#duree*/ .sejour.nbjours { font-size: 2.2rem; font-weight: 900; background-color: #32aacc; padding-left: 0.8rem; /* border: 1px solid var(--rouge); */ } .node--type-trek /*#duree*/ .sejour.nbjours, .node--type-trek /*#duree*/ .sejour.nbjoursactivite, .node--type-trek /*#duree*/ .sejour.nbnuits { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; } /* .node--type-trek .sejour.nbjoursactivite { background-color: #2B92AF; } .node--type-trek .sejour.nbnuits { background-color: #247A93; } */ .node--type-trek .sejour.nbjours .suffixe.nbjours { font-size: 1.6rem; padding-left: 0.5rem; } .node--type-trek /*#duree*/ .sejour.nbnuits > span.suffixe, .node--type-trek /*#duree*/ .sejour.nbjoursactivite > span.suffixe { font-size: 0.8em; font-weight: normal; display:inline-block; vertical-align: middle; padding-left: 0.3rem; /* border: 1px solid var(--rouge); */ } /* V2 TREK > DUREE */ /* .node--type-trek .icone-trek { width: 35px; } */ .node--type-trek .icone-label { color:#000000; font-size: 1rem; font-weight: 300; } .node--type-trek .liste-items { padding: 0; margin:0; /* border: 1px solid aqua; */ line-height: 1.2rem; text-align: center; } .node--type-trek #durees-milieu { max-width: 99%; margin: 1.5rem auto; border-radius: 7px; background-color: #E1EAED; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; padding: 1.5rem; } .node--type-trek .icone-trek { background-color: #FFFFFF; width: 64px; height: 64px; border-radius: 50rem; display: flex; justify-content: center; align-items: center; margin-right: 0.5rem; } .node--type-trek #durees-milieu .duree_nb_jours, .node--type-trek #durees-milieu .duree_nb_nuits, .node--type-trek #durees-milieu .duree_jours_activite, .node--type-trek #durees-milieu .activite-neige-hors-neige { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; /* padding: 1rem */ /* 0.5rem */; } .node--type-trek .icone-trek .icone { width: 40px; } .node--type-trek .icone-duree { content: url("/sites/default/files/media/svg/duree_calendrier.svg"); } .node--type-trek .icone-nuits { content: url("/sites/default/files/media/svg/duree_nuit.svg"); } .node--type-trek .icone-duree-activite { content: url("/sites/default/files/media/svg/duree_activite.svg"); } .node--type-trek /*#duree*/ .icone-activite-hors-neige { content: url("/sites/default/files/media/svg/icone-activite-hors-neige.svg"); } .node--type-trek /*#duree*/ .icone-activite-neige { content: url("/sites/default/files/media/svg/icone-activite-neige.svg"); } .node--type-trek /*#duree*/ .label-activite-neige-hors-neige, .node--type-trek /*#duree*/ .label-activite-neige-neige { line-height: 1rem; } .node--type-trek /* #duree */ .duree-sejour-valeur, .node--type-trek /* #duree */ .duree-nuits-valeur, .node--type-trek /* #duree */ .duree-activite-valeur { font-weight: bolder; letter-spacing: -0.2rem; padding: 0; } .node--type-trek /* #duree */ .duree-sejour-valeur { font-size: 3rem; } .node--type-trek /* #duree */ .duree-nuits-valeur, .node--type-trek /* #duree */ .duree-activite-valeur { font-size: 1.8rem; } .node--type-trek /*#duree*/ .duree-sejour-suffixe, .node--type-trek /*#duree*/ .duree-nuits-suffixe, .node--type-trek /*#duree*/ .duree-activite-suffixe { margin-left: 0.5rem; font-size: 1rem; font-weight: normal; } .node--type-trek /*#duree*/ .duree-activite-suffixe { word-break: normal; /* permet écriture sur 2 lignes */ line-height: 1rem; } .node--type-trek /*#duree*/ .label-activite-neige-hors-neige div { margin-left: 0.3rem; } .node--type-trek /*#duree*/ .label-activite-neige-hors-neige div:first-child { font-size: 1rem; font-weight: normal; } .node--type-trek /*#duree*/ .label-activite-neige-hors-neige div:last-child { font-size: 1.2rem; font-weight: 800; } /* fin de TREK > DUREE */ /* TREK > DESCRIPTION */ .node--type-trek #description { position: relative; max-height: 35vh; /* Définir la hauteur maximale du conteneur */ overflow-y: scroll; background-color: #f3f3f3; /* border: 1px solid var(--rouge); */ } .node--type-trek #description .field--name-body { max-height: 35vh; overflow-y: auto; padding: 1.2rem; padding-bottom: 2rem; /* padding: 1rem 2rem ; */ } @media screen and (min-width: 576px) { .node--type-trek #description .field--name-body { padding: 1rem 2rem 3rem 2rem ; } } .flou { position: absolute; bottom: 0; left: 0; right: 0; height: 50px; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)); /* Créer un dégradé du transparent au blanc */ pointer-events: none; /* Assurez-vous que l'élément de flou n'interfère pas avec les interactions de l'utilisateur */ } /* CARTE TREK */ #carte-detail { /* left: 0; width: 100vw; margin-left: calc(-50vw + 50%); Ajustement pour centrer */ } /* fin de CARTE TREK */ /* fin de TREK > DESCRIPTION */ /* debut TREK > PARTICIPANTS */ .node--type-trek .participants-niveaux-wrapper { width: 99%; margin: var(--marge-verticale) auto; display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; align-items: stretch; } .node--type-trek .participants { flex-grow: 1; min-height: 113px; padding: 0 0.5rem; background-color: #E1EAED; gap: 0 1.25rem; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; border-radius: 7px; } .node--type-trek .icone-participants { /* width: 50px; */ content: url("/sites/default/files/media/svg/icone-participants.svg"); } .node--type-trek .participants-valeur { font-size: 2.2rem; font-weight: bolder; letter-spacing: -0.2rem; padding: 0; } .node--type-trek .participants-pers { margin-left: 0.5rem; font-size: 1rem; font-weight: normal; } .node--type-trek .participants-suffixe { font-size: 1.5rem; font-weight: bolder; letter-spacing: -0.1rem; padding-left: 0.2rem; } /* fin TREK > PARTICIPANTS */ /* TREK > NIVEAUX */ .node--type-trek .niveaux { flex-grow: 1; display: flex; gap: 0 0.3rem; justify-content: space-evenly; } .node--type-trek .niveau { padding-top: 0.7rem; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #E1EAED; width: 100px; border-radius: 7px; } @media screen and (min-width: 450px) { .node--type-trek .niveaux { gap: 0 1.5rem; } .node--type-trek .niveau { width: 125px; } } .node--type-trek .icone-niveau-physique, .node--type-trek .icone-niveau-technique, .node--type-trek .icone-niveau-raquette, .node--type-trek .icone-niveau-confort, .node--type-trek .icone-niveau-alpinisme, .node--type-trek .icone-niveau-ski { width: 40px; } .node--type-trek .icone-niveau-physique { content: url("/sites/default/files/media/svg/niveau-physique.svg"); } .node--type-trek .icone-niveau-technique { content: url("/sites/default/files/media/svg/niveau-technique.svg"); } .node--type-trek .icone-niveau-raquette { content: url("/sites/default/files/media/svg/mobilite_raquette.svg"); } .node--type-trek .icone-niveau-confort { content: url("/sites/default/files/media/svg/niveau-confort.svg"); } .node--type-trek .icone-niveau-alpinisme { content: url("/sites/default/files/media/svg/piolet.svg"); } .node--type-trek .icone-niveau-ski { content: url("/sites/default/files/media/svg/mobilite_ski_rando_alpine3.svg"); } .niveau-question { display: flex; flex-wrap: nowrap; gap: 0 0.75rem; } .node--type-trek .niveau-valeur { font-size: 2.2rem; font-weight: 900; } .node--type-trek .niveau-suffixe { font-size: 1rem; font-weight: normal; } .node--type-trek .icone-question { width: 30px; content: url("/sites/default/files/media/svg/icone-question.svg"); cursor: pointer; } .node--type-trek h5.modal-title { font-size: 2rem !important; font-weight: bold !important; text-transform: uppercase !important; } .node--type-trek .p-niveau { margin-top: 2rem; } .node--type-trek span.ou-niveau { font-size: smaller; font-weight: 300; } .node--type-trek .modal-niveau-commentaire { font-size:1rem; font-weight: 500; max-width: 95%; margin: 0.5rem auto; padding: 0.5rem; background-color: #eeeeee; } .node--type-trek .modal-niveau-commentaire::before { display: inline-block; width: 24px; height: 24px; margin: 0 0.5rem -0.3rem 0; background-image: url("/sites/default/files/media/svg/attention-001.svg"); background-size: contain; background-repeat: no-repeat; content: ""; } .node--type-trek .modal-dialog-scrollable .modal-content { max-height: 80vh !important; } @media screen and (min-width: 576px) { .node--type-trek .modal-dialog-scrollable .modal-content { max-height: 50vh !important; } } /* fin de TREK > NIVEAUX */ .node--type-trek #carte-detail .view-content.row { margin: 0!important; } /* LOGISTIQUE TREK */ .node--type-trek .logistique-trek { margin: var(--marge-verticale) auto; padding: 1rem; background-color: #E1EAED; border-radius: 7px; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; justify-content: space-evenly; align-items: flex-start; /* border: 10px solid var(--rouge); */ } /* PARCOURS */ .node--type-trek .logistique-trek .parcours, .node--type-trek .logistique-trek .portage, .node--type-trek .logistique-trek .hebergement, .node--type-trek .logistique-trek .transferts { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.5rem 0; width: 125px; /* border: 1px solid aqua; */ } @media screen and (min-width: 576px) { .node--type-trek .logistique-trek .parcours, .node--type-trek .logistique-trek .portage, .node--type-trek .logistique-trek .hebergement, .node--type-trek .logistique-trek .transferts { min-width: 20%; /* border: 1px solid yellow; */ } } .node--type-trek .logistique-trek .icone-parcours { /*width: 35px;*/ content: url("/sites/default/files/media/svg/icone-parcours.svg"); } .node--type-trek .logistique-trek .parcours-valeurs, .node--type-trek .logistique-trek .portage-valeurs, .node--type-trek .hebergement-valeurs, .node--type-trek .transferts-valeurs { padding-left: 0.2rem; font-size: 1.2rem; font-weight: bold; } /* fin de PARCOURS */ /* PORTAGE */ .node--type-trek .logistique-trek .icone-portage { /*width: 35px;*/ content: url("/sites/default/files/media/svg/icone-portage.svg"); } /* fin de PORTAGE */ /* TREK > HEBERGEMENT */ .node--type-trek .hebergement { /* background-color: #e4eedd; */ } .node--type-trek .icone-hebergement { /*width: 35px;*/ content: url("/sites/default/files/media/svg/icone-hebergement.svg"); } /* fin de TREK > HEBERGEMENT */ /* TREK > TRANSFERTS */ .node--type-trek .transferts { /* background-color: #c5d7d0; */ } .node--type-trek .icone-transferts { /*width: 35px;*/ content: url("/sites/default/files/media/svg/icone-transferts.svg"); } /* fin de TREK > TRANSFERTS */ /* TREKS > DIAPORAMA */ .node--type-trek #diaporama-wrapper { display: flex; /* flex:1; border: 1px solid aqua; */ } .node--type-trek .photoswipe-gallery { width: 100%; padding: 0.5rem; display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; align-items: center; min-height: 100px; } .node--type-trek .photoswipe-gallery img { border: 5px solid #FFFFFF; } /* fin de TREKS > DIAPORAMA */ /* MES AUTRES TREKS */ #autres-treks { background-color: #31aacc; padding: 1rem; } #autres-treks h2 { color: #FFFFFF; } /* fin de MES AUTRES TREKS */ /* .node--type-trek /*#duree*/, */ .node--type-trek #groupe-participants { display: block; flex-grow: 1; flex-shrink: 1; flex-basis: auto; align-self: auto; order: 0; height: 100%; } .node--type-trek #participants-wrapper { display: flex; flex-wrap: nowrap; justify-content: stretch; } .node--type-trek /*#duree*/ .sejour.field__item, .node--type-trek #groupe-participants .etiquette_participants, .node--type-trek #participants-wrapper .participants.field__item { height: 60px; } /* DOWNLOAD FT TREK */ .pdf-label, .pdf-title { display: block; } .pdf-label { color:grey; font-size: smaller; } .pdf-title { } /* -------- formulaire de demande de FT ---------- */ #filefield-mail-download-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } #filefield-mail-download-form .form-item-email { flex: 1 1 auto; /* Peut grandir et rétrécir */ max-width: 340px; margin-left: 0.5rem; } #filefield-mail-download-form button { flex: 0 0 auto; /* Garde sa taille naturelle */ white-space: nowrap; /* Empêche le texte de se couper sur plusieurs lignes */ margin-left: 0.5rem; } #filefield-mail-download-form img { flex-basis: 100%; margin-top: 10px; } #filefield-mail-download-form .field--name-field-og-image .field__label { display: none; } body.path-download #main-wrapper { height: 100vh; } body.path-download #block-itak-barrio-page-title { margin: 2rem 0; } body.path-download form img { margin: 2rem 0; } /* -------- formulaire de demande de FT ---------- */ /* ===================== FIN de DOWNLOAD FT TREK ========================= */ /* NODE TREK TEASER */ .node-trek-teaser .card-text { max-height: 200px; overflow-y: scroll; /* border: 1px solid var(--rouge); */ padding: 0.5rem 0.1rem; } /* fin de NODE TREK TEASER */ /* TAXONOMY */ body.page-node-55 h1, body.page-node-92 h1, body.page-node-93 h1, body.page-node-98 h1, body.page-vocabulary-etats h1 , body.page-vocabulary-massifs h1 , body.page-vocabulary-activites h1 , body.page-vocabulary-particularites h1, body.page-view-particularites h1 { font-size: 3rem; text-transform: uppercase; } body.page-vocabulary-particularites .views-field-field-etat a:link, body.page-vocabulary-particularites .views-field-field-etat a:visited, body.page-vocabulary-particularites .views-field-field-etat a:active, body.page-vocabulary-activites .views-field-field-etat a:link, body.page-vocabulary-activites .views-field-field-etat a:visited, body.page-vocabulary-activites .views-field-field-etat a:active { background-color: var(--rouge); border-radius: 7px; color: #FFFFFF; padding: 0.15rem 0.25rem; font-size: 1rem; font-weight: bold; text-decoration: none; } body.page-vocabulary-particularites .views-field-field-etat a:hover, body.page-vocabulary-activites .views-field-field-etat a:hover { background-color: var(--rouge-fonce); } /* fin de TAXONOMY */ /* TAXONOMIE ETATS */ .view-terme-taxo-etats h2, .view-terme-taxo-etats h3{ font-weight: bold; } .view-frontpage .view-content, .view-terme-taxo-etats .view-content { display: flex; justify-content: space-evenly; /* border: 1px solid var(--rouge); */ gap: 1rem 0; margin: 1rem 0; } .view-terme-taxo-etats .view-content .views-field { display: flex; } .view-frontpage .view-content .views-row, .view-terme-taxo-etats .view-content .views-row { max-width: 325px; flex-grow: 1; /* border: 1px solid aqua; */ display: flex; } .view-terme-taxo-etats .view-content .views-row .views-field { flex-grow: 1; } .view-terme-taxo-etats .view-content .views-row span.field-content { display:flex; /* border: 1px solid var(--rouge); */ flex-grow: 1; } .node-trek-teaser .card, .view-terme-taxo-etats .view-content .views-row .card { flex-grow: 1; } .node-trek-teaser .card-body, .view-terme-taxo-etats .view-content .views-row .card-body { display: flex; flex-direction: column; flex-wrap: nowrap; } .node-trek-teaser .card-title, .node-trek-teaser .view-content .card-text, .view-terme-taxo-etats .view-content .views-row .card-title, .view-terme-taxo-etats .view-content .views-row .card-text { margin-bottom: auto; } .view-terme-taxo-etats .card-title a:link, .view-terme-taxo-etats .card-title a:visited, .view-terme-taxo-etats .card-title a:hover, .view-terme-taxo-etats .card-title a:active { color: rgb(242, 39, 14); text-decoration: none; font-weight: bold; } .node-trek-teaser .card-bouton { display: flex; justify-content: flex-end; margin-top: 0.5rem; } .btn.btn-voir { padding: 0.15rem 0.25rem; font-size: 1rem; line-height: 1.3333333; border-radius: 6px; color: #ffffff; background-color: var(--rouge); text-decoration: none; text-align: center; font-weight: normal; align-self: flex-end; } /* ------------------- TAXONOMIE ---------------- */ /* fin de TAXONOMIE ETATS */ /* page TAXO ETATS et MASSIFS */ /* PORTRAIT */ /* .path-guide .views-field-user-picture img { border: 5px solid #FFFFFF; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); } */ .page-node-55 .view-guides { /* TEST */ /* display: none; */ } .page-node-55 .view-guides .view-content { /* border: 1px solid var(--rouge); */ /* display: flex; flex-wrap: wrap; justify-content: space-between; margin: 1rem 0; */ display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); grid-gap: 10px; justify-items: center; /* Centre horizontalement */ margin: 2rem 0.5rem; /* background-color: var(--rouge); */ } .page-node-55 .view-guides .view-content .views-row { /* border: 1px solid yellow; */ display: flex; flex-direction: column; width: 160px; /* border-radius: 5px; */ border: 1px solid #cecece; background-color: #FFFFFF; /* box-shadow: 0px 2px 15px rgba(136, 152, 167, 0.8); */ /* box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.12); */ margin: 0.2rem 0.5rem; padding: 0; } /* @media screen and (max-width: 576px) { .path-guide .view-guides .view-content .views-row { width:160px; margin: 0.2rem; } } */ .page-node-55 .views-field-user-picture img { /* width: 150px; height: 150px; */ flex-grow: 1; /* border: 5px solid #cecece; border-radius: 50%; */ /* Transforme le bord en cercle */ overflow: hidden; /* Masque les parties de l'image qui dépassent du cercle */ } /* @media screen and (max-width: 576px) { .path-guide .views-field-user-picture img { width: 140px; height: 140px; } }*/ .page-node-55 .views-field-name { text-align: center; margin-top: 0.5rem; flex: 1; /* IMPORTANT !!! => même hauteur du conteneur + plaque la suite vers le bas */ /* min-height: 4rem; */ font-weight: bold; font-size: 1.2rem; line-height: 1.4rem; /* border-bottom: 1px solid #c7c7c7; */ padding-bottom: 0.5rem; /* background-color: var(--rouge); */ } /* .path-guide .views-field-name a:link, .path-guide .views-field-name a:visited, .path-guide .views-field-name a:active { color: #000000; text-decoration: none; } .path-guide .views-field-name a:hover { color: #000000; } */ /* .page-node-55 .views-field-name a:link, .page-node-55 .views-field-name a:visited, .page-node-55 .views-field-name a:hover, .page-node-55 .views-field-name a:active { color: #CC0000; text-decoration: none; font-size: clamp(16px, 5vw, 20px); } */ .page-node-55 .views-field-field-prenom, .page-node-55 .views-field-field-nom { display: flex; justify-content: center; } .page-node-55 .prenom a:link, .page-node-55 .nom a:link, .page-node-55 .prenom a:visited, .page-node-55 .nom a:visited, .page-node-55 .prenom a:hover, .page-node-55 .nom a:hover, .page-node-55 .prenom a:active, .page-node-55 .nom a:active { color: var(--rouge); text-decoration: none; font-size: clamp(16px, 5vw, 20px); /* CLAMP permet de donner un MIN et un MAX */ /* text-align: center; */ font-weight: 900; /* border: 1px solid aqua; */ } .page-node-55 .nom { text-transform: uppercase; } .page-node-55 .view-guides div.separateur/* , .path-guide .view-guides div.separateur */ { color: #b7b7b7; opacity: 100%; padding: 0 10px !important; } /* .path-guide .views-field-field-diplomes .list-group-item, */ .page-node-55 .views-field-field-diplomes .list-group-item { border: none; border-bottom: 1px solid #cecece; border-radius: 0; text-align: center; line-height: 1.2rem; padding-bottom: 0.5rem; /* border-bottom: 1px solid var(--rouge); */ } /* .path-guide .views-field-field-diplomes .list-group-item:last-child, */ .page-node-55 .views-field-field-diplomes .list-group-item:last-child { border: none; } .recherche-guide /* .view-content.row */ { margin: 1.5rem 0 !important; } /* TAXO PARTICULARITES */ } /* CONTACTS */ /* évite affichage d'onglets de navigation sous forme de tabs pas paramétrables dans gestion des blocs */ .path-user nav { display: none; } .path-user article.profile { display:flex; justify-content: center; } .path-user #guide-fiche { /* border: 1px solid aqua; */ width: 100%; display: flex; flex-wrap: wrap; justify-content: center; border: 1px solid #cecece; background-color: #FFFFFF; margin: 1.5rem 0rem; padding: 0rem; } .path-user #guide-portrait-wrapper { /* flex-grow: 1; */ /* border: 1px solid var(--rouge); */ display: flex; justify-content: flex-start; align-items: flex-start; } .path-user #guide-presentation { font-size: 1.3rem; margin: 1rem; padding: 1.5rem 2rem; max-height: 20vh; overflow-y: scroll; background-color: #f3f3f3; } .path-user #guide-presentation p:first-child::before, .path-user #guide-presentation p:last-child::after { content: ""; display: inline-block; background-size: contain; background-repeat: no-repeat; width: 1.5em; height: 1.5em; } .path-user #guide-presentation p:first-child::before { background-image: url('/sites/default/files/media/svg/quote-ouvre.svg'); /* margin-right: 0.5em; margin-left: -1rem; */ margin: 0 0.5rem 0 -1rem; } .path-user #guide-presentation p:last-child::after { background-image: url('/sites/default/files/media/svg/quote-ferme.svg'); margin-left: 0.5em; /* border: 1px solid red; */ } @media screen and (max-width: 762px) { .path-user #guide-fiche { max-width: 300px; } .path-user #guide-portrait-wrapper { justify-content: center; /* border: 1px solid aqua; */ } } .path-user #guide-portrait img { /* width: 160px; height: 160px; */ /* flex: 1; */ /* max-width: 200px; max-height: 200px; */ /* border: 10px solid #cecece; */ /* border-radius: 50%; */ /* Transforme le bord en cercle */ overflow: hidden; /* Masque les parties de l'image qui dépassent du cercle */ } /* .path-user #guide-fiche h1 div { border: 1px solid var(--rouge); } */ .path-user #guide-fiche h1 { font-size: calc(1.6rem + 1.5vw); text-align: center; /* margin-top: -1rem !important; */ line-height: 1; font-weight: 600; } #guide-fiche h1.title > div{ color: #000000; } .path-user #guide-details { display: flex; flex-direction: column; flex-wrap: wrap; align-content: space-around; /* border: 1px solid aqua; */ } .path-user #guide-details, .path-user #guide-infos { margin: 0.5rem; padding: 0.3rem; display: flex; /* border: 1px solid aqua; */ } .path-user #guide-details { flex-grow: 1; /* border: 1px solid yellow; */ } .path-user #guide-details h2, .path-user #guide-infos h2, .path-user #guide-diplomes h2 { font-size: 1.5rem; text-align: center; } .path-user #guide-diplomes h2 { line-height: 1; font-weight: 100; margin: 0.5rem 0 0 0; } .path-user #guide-carte-pro h2 a:link, .path-user #guide-carte-pro h2 a:visited, .path-user #guide-carte-pro h2 a:active { /* color: #f2270e; */ color: var(--rouge); text-decoration: none; } .path-user #guide-carte-pro h2 a:hover { text-decoration: underline; } .line-md--external-link::after { display: inline-block; margin-left: 0.8rem; width: 1.2em; height: 1.2em; vertical-align: -0.125em; content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='red' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath stroke-dasharray='42' stroke-dashoffset='42' d='M11 5H5V19H19V13'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.9s' values='42;0'/%3E%3C/path%3E%3Cpath stroke-dasharray='12' stroke-dashoffset='12' d='M13 11L20 4'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.9s' dur='0.45s' values='12;0'/%3E%3C/path%3E%3Cpath stroke-dasharray='8' stroke-dashoffset='8' d='M21 3H15M21 3V9'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='1.35s' dur='0.3s' values='8;0'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); } .path-user #guide-carte-pro { margin-top: 0.8rem; } .path-user #guide-carte-pro h2 .visuel { margin-top: 0.5rem; /* border: 1px solid aqua; */ } .path-user span.modal-diplome { cursor: pointer; line-height: 1.8rem; font-size: 1.5rem; /* font-weight: 900; */ /* ne fonctionne pas balise plus loin :( */ font-variant-caps: small-caps; border-radius: 0%; border: 0; } .path-user span.modal-diplome::before { display: inline-block; vertical-align: middle; width: 1.8rem; height: 1.8rem; line-height: 1.8rem; content: url("/sites/default/files/media/svg/question-circle-fill.svg"); padding-right: 0.1rem; transform: scale(1.5); /* mettre à l'échelle le SVG */ transform-origin: center; /* Centrez la mise à l'échelle */ /* --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-width='2'%3E%3Cpath stroke-dasharray='60' stroke-dashoffset='60' d='M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.75s' values='60;0'/%3E%3C/path%3E%3Cpath stroke-dasharray='20' stroke-dashoffset='20' d='M8.99999 10C8.99999 8.34315 10.3431 7 12 7C13.6569 7 15 8.34315 15 10C15 10.9814 14.5288 11.8527 13.8003 12.4C13.0718 12.9473 12.5 13 12 14'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.9s' dur='0.6s' values='20;0'/%3E%3C/path%3E%3C/g%3E%3Ccircle cx='12' cy='17' r='1' fill='%23000' fill-opacity='0'%3E%3Canimate fill='freeze' attributeName='fill-opacity' begin='1.5s' dur='0.3s' values='0;1'/%3E%3C/circle%3E%3C/svg%3E"); */ } .path-user #guide-diplomes ul.diplome-label { list-style-type: none; padding-left: 0.5rem; text-align: center; font-weight: 900; /* border: 1px solid aqua; */ } .path-user #guide-diplomes ul.diplome-label h3, .path-user #guide-diplomes ul.diplome-label .modal-body { text-align: initial; } .path-user #guide-diplomes ul.diplome-label h3 { font-size: 1.2rem; /* font-variant-caps: small-caps !important; */ /* ne fonctionne pas car autre CSS après */ } /* .path-user .modal-header .btn-close, */ .modal-header .btn-close { background-color: var(--rouge); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e"); background-position: center; background-size: 1em; background-repeat: no-repeat; opacity: 1; } .modal-header .btn-close:hover { background-color: var(--rouge-fonce); } .path-user #guide-details { /* border: 1px solid var(--rouge); */ /* margin: 0.5rem; padding: 0.3rem; display: flex; */ /* min-width: 300px; flex:1; */ flex-direction: column; justify-content: center; } .path-user #guide-infos { /* border: 1px solid green; */ /* max-width: 300px; */ flex-shrink: 1; flex-direction: column; justify-content: center; align-items: center; } .path-user #guide-infos h2 { margin:0; } @media screen and (max-width: 1200px) { .path-user #guide-infos { margin-top: 1em; border-top: 1px solid #cecece; } } .path-user #guide-contacts { display: flex; flex-wrap: wrap; justify-content: space-around; /* border: 1px solid aqua; */ } .path-user #guide-infos h3 { text-transform: none; font-weight: bold; font-size: 1.2rem; } .path-user #guide-contacts .contacts { /* border: 1px solid var(--rouge); */ font-size: 2rem; text-decoration: none; font-weight: bold; /* letter-spacing: -1px; */ /* padding: 0.1rem 0.8rem; */ width: 1.5em; height: 1.5em; /* margin: 0.1rem 0.8rem; */ } .path-user #guide-telephone, .path-user #guide-site, .path-user #guide-facebook, .path-user #guide-email { width: 3.5rem; height: 3.5rem; /* border: 0.2rem solid; */ /* background-color: #f2270e; */ background-color: var(--rouge); border-radius: 50%; overflow: hidden; margin:0.2rem; display: flex; justify-content: center; align-items: center; } .line-md--phone-call { display: inline-block; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'%3E%3Cpath stroke-dasharray='64' stroke-dashoffset='64' d='M8 3C8.5 3 10.5 7.5 10.5 8C10.5 9 9 10 8.5 11C8 12 9 13 10 14C10.3943 14.3943 12 16 13 15.5C14 15 15 13.5 16 13.5C16.5 13.5 21 15.5 21 16C21 18 19.5 19.5 18 20C16.5 20.5 15.5 20.5 13.5 20C11.5 19.5 10 19 7.5 16.5C5 14 4.5 12.5 4 10.5C3.5 8.5 3.5 7.5 4 6C4.5 4.5 6 3 8 3Z'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.6s' values='64;0'/%3E%3CanimateTransform attributeName='transform' begin='0.6s;lineMdPhoneCallLoop0.begin+2.6s' dur='0.5s' type='rotate' values='0 12 12;15 12 12;0 12 12;-12 12 12;0 12 12;12 12 12;0 12 12;-15 12 12;0 12 12'/%3E%3C/path%3E%3Cpath stroke-dasharray='4' stroke-dashoffset='4' d='M14 7.04404C14.6608 7.34734 15.2571 7.76718 15.7624 8.27723M16.956 10C16.6606 9.35636 16.2546 8.77401 15.7624 8.27723' opacity='0'%3E%3Cset id='lineMdPhoneCallLoop0' attributeName='opacity' begin='0.7s;lineMdPhoneCallLoop0.begin+2.7s' to='1'/%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.7s;lineMdPhoneCallLoop0.begin+2.7s' dur='0.2s' values='4;8'/%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='1.3s;lineMdPhoneCallLoop0.begin+3.3s' dur='0.3s' values='0;4'/%3E%3Cset attributeName='opacity' begin='1.6s;lineMdPhoneCallLoop0.begin+3.6s' to='0'/%3E%3C/path%3E%3Cpath stroke-dasharray='10' stroke-dashoffset='10' d='M20.748 9C20.3874 7.59926 19.6571 6.347 18.6672 5.3535M15 3.25203C16.4105 3.61507 17.6704 4.3531 18.6672 5.3535' opacity='0'%3E%3Cset attributeName='opacity' begin='1s;lineMdPhoneCallLoop0.begin+3s' to='1'/%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='1s;lineMdPhoneCallLoop0.begin+3s' dur='0.2s' values='10;20'/%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='1.5s;lineMdPhoneCallLoop0.begin+3.5s' dur='0.3s' values='0;10'/%3E%3Cset attributeName='opacity' begin='1.8s;lineMdPhoneCallLoop0.begin+3.8s' to='0'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .line-md--home { display: inline-block; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'%3E%3Cpath stroke-dasharray='21' stroke-dashoffset='21' d='M5 21H19'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.2s' values='21;0'/%3E%3C/path%3E%3Cpath stroke-dasharray='15' stroke-dashoffset='15' d='M5 21V8M19 21V8'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.2s' dur='0.2s' values='15;0'/%3E%3C/path%3E%3Cpath stroke-dasharray='24' stroke-dashoffset='24' d='M9 21V13H15V21'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.4s' dur='0.4s' values='24;0'/%3E%3C/path%3E%3Cpath stroke-dasharray='26' stroke-dashoffset='26' d='M2 10L12 2L22 10'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.5s' dur='0.4s' values='26;0'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .line-md--facebook { display: inline-block; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1'%3E%3Cpath stroke-dasharray='24' stroke-dashoffset='24' d='M17 4L15 4C12.5 4 11 5.5 11 8V20'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.4s' values='24;0'/%3E%3C/path%3E%3Cpath stroke-dasharray='12' stroke-dashoffset='12' d='M8 12H15'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.5s' dur='0.2s' values='12;0'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .line-md--email { display: inline-block; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1'%3E%3Crect width='18' height='14' x='3' y='5' stroke-dasharray='64' stroke-dashoffset='64' rx='1'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.6s' values='64;0'/%3E%3C/rect%3E%3Cpath stroke-dasharray='24' stroke-dashoffset='24' d='M3 6.5L12 12L21 6.5'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.6s' dur='0.4s' values='24;0'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } #guide-contacts a, #guide-contacts a.link, #guide-contacts a.visited, #guide-contacts a.hover, #guide-contacts a.active { color: #FFFFFF; } .path-user #block-bk-mes-treks-monde, .path-user #block-bk-mes-treks-france { margin: 2.5rem 0; padding: 1.5rem 0 2.5rem 0; /* border: 1px solid var(--rouge); */ } .path-user #block-bk-mes-treks-monde { background-color: #478FA4; } .path-user #block-bk-mes-treks-france { background-color: #69A4B5; } .path-user #block-bk-mes-treks-monde h2, .path-user #block-bk-mes-treks-france h2 { padding: 0 0 1rem 1rem; color: #ffffff; } .path-user .view-carte-guide-mes-treks, .path-user .view-carte-guide-mes-treks-france { display: flex; justify-content: center; /* border: 1px solid aqua; */ } .path-user .view-carte-guide-mes-treks .view-content.row, .path-user .view-carte-guide-mes-treks-france .view-content.row { width: 95%; margin: 0; /* border: 5px solid var(--rouge); */ } /* fin de CONTACTS */ /* fin de PORTRAIT */ /** Vue TOUS MES TREKS + PARTICULARITES = SANS AVION **/ .path-user .views-element-container h2 { font-weight: 600; } /* body.page-vocabulary-etats .view-content, body.page-vocabulary-particularites .view-taxo-particularite .view-content, */ .trek-liste .view-content, #block-bk-tous-treks-guide, section#mes-autres-treks { background-color: #98bad6; position: relative; left: 50%; transform: translateX(-50%); width: 90vw; max-width: 1400px; margin: 4rem 0 3rem 0; padding: 20px 10px; } body.page-vocabulary-etats .view-content, body.page-vocabulary-particularites .view-taxo-particularite .view-content { padding: 1.5rem; margin-top: 2.5rem; } #mes-autres-treks h2 { font-size: 2rem; font-weight: 900; padding-left: 0.5rem; } .view-mes-treks { margin: 2rem; } .view-mes-treks .swiper-slide { background-color: #ffffff; margin: 0 1rem; } @media screen and (max-width: 576px) { body.page-vocabulary-particularites .view-taxo-particularite .view-content { width: 100vw; } .view-mes-treks { margin: 0; } } .view-mes-treks .view-content.row { display: flex; flex-wrap: wrap; gap: 1.5rem 0 ; justify-content: space-evenly; } .view-mes-treks .views-row { /* border: 1px solid var(--rouge); */ width: initial; max-width: initial; flex-shrink: initial; /* background-color: yellow; */ display: flex; flex-direction: column; max-width: 325px; /* LA LARGEUR DE LA PHOTO */ } .trek-liste .views-view-responsive-grid__item-inner { max-width: 325px; /* LA LARGEUR DE LA PHOTO */ height: 100%; background-color: #FFFFFF; } .trek-liste .views-view-responsive-grid__item-inner .views-field-field-activites { height: 0px; } .trek-liste .champ-activite { display: flex; align-items: center; background-color: #76d3d6; border-radius: 0 0.2rem 0.2rem 0.2rem; padding: 0.5rem; max-width: 40px; height: 40px; position: relative; top: 0px; } body.page-vocabulary-particularites .trek-liste .champ-activite .activites.icone-svg, body.page-vocabulary-etats .trek-liste .champ-activite .activites.icone-svg { width: 24px; height: 24px; } body.page-vocabulary-particularites .trek-liste .champ-activite .activites.tag, body.page-vocabulary-etats .trek-liste .champ-activite .activites.tag { display: none; } /* @media screen and (min-width: 576px) { body.page-vocabulary-etats .trek-liste .champ-activite { display: flex; flex-direction: column; padding: 0.5rem; max-width: 80px; height: 90px; position: relative; top: 0px; } } */ .trek-liste .views-view-responsive-grid__item-inner .views-field-field-etat, .trek-liste .views-view-responsive-grid__item-inner .views-field-title, .trek-liste .views-view-responsive-grid__item-inner .views-field-body { padding: 0.5rem 0.2rem 0.1rem 0.5rem; } .trek-liste .views-view-responsive-grid__item-inner .views-field-field-etat { height: 4rem; } .trek-liste .views-view-responsive-grid__item-inner .views-field-field-etat { background-color: #000000; display: flex; flex-wrap: wrap; align-items: center; } .trek-liste .views-view-responsive-grid__item-inner .views-field-field-etat .field-content.depart-etat { color: #FFFFFF; line-height: 90%; } .trek-liste .views-view-responsive-grid__item-inner .views-field-field-etat h3 { font-size: 1rem; letter-spacing: -0.05rem; color: #FFFFFF; } .trek-liste .views-view-responsive-grid__item-inner .views-field-title { padding-bottom: 0.8rem; } .trek-liste .views-view-responsive-grid__item-inner .views-field.views-field-body { min-height: 6rem; padding: 0.5rem; } .trek-liste .views-view-responsive-grid__item-inner .views-field.views-field-title { font-size: 1.3rem; line-height: 1.4rem; } .trek-liste .views-view-responsive-grid__item-inner .views-field.views-field-title a { font-weight: bold; } .trek-liste .views-view-responsive-grid__item-inner .views-field.views-field-title a:link, .trek-liste .views-view-responsive-grid__item-inner .views-field.views-field-title a:visited, .trek-liste .views-view-responsive-grid__item-inner .views-field.views-field-title a:hover, .trek-liste .views-view-responsive-grid__item-inner .views-field.views-field-title a:active { text-decoration: none; color: var(--rouge); } /* .trek-liste .views-view-responsive-grid__item-inner .views-field.views-field-title a:hover { text-decoration: none; color: #FFFFFF; } */ .trek-liste .view-mes-treks .views-field-title .field-content { } .trek-liste .views-view-responsive-grid__item-inner .views-field-field-activites .field-content a /* .trek-liste .views-view-responsive-grid__item-inner .views-field-field-etat .field-content a */ { text-decoration: none; color: var(--rouge); } /* .trek-liste .views-view-responsive-grid__item-inner .views-field-field-etat .field-content a:hover { color: #FFFFFF; } */ /* .trek-liste .views-view-responsive-grid__item-inner .views-field-field-etat .field-content { font-size: 1rem; padding: 0.2rem 0 0.15rem 0.2rem; color: #FFFFFF; font-style: italic; font-weight: normal; } */ .taxonomy-term .field--name-description { margin: 2rem 0.5rem; padding: 1.5rem; border-radius: 6px; background-color: #FFFFFF; color: #000000; font-size: 1.2rem; } .taxonomy-term .field--name-description h2, .taxonomy-term .field--name-description h3 { font-weight: bold; } #block-bk-tous-treks-guide { /* background-color: #1C5E71; */ padding-bottom: 2.5rem; } #block-bk-tous-treks-guide h2 { color: #FFFFFF; padding: 1rem 0 0 1rem; } #block-bk-tous-treks-guide > div > div > div > div > div:nth-child(13) > div.views-field.views-field-title > span > a { display: block; width: 100%; max-width: 100%; overflow-wrap: anywhere; /* Test avec cette variante */ } /* SWIPER SLIDER */ /* .swiper-button-next, .swiper-button-prev { A CONSERVER = ORIGINEL position: absolute; top: 50%; width: calc(var(--swiper-navigation-size)/ 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(0px - (var(--swiper-navigation-size)/ 2)); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color,var(--swiper-theme-color)); } */ /* .swiper-button-prev, .swiper-button-next { top: 10%; right: 0; background-color: #ff2600; color: #FFF; } */ /* fin de SWIPER SLIDER */ /** FIN de Vue TOUS MES TREKS **/ /** CALENDRIER **/ .page-view-calendrier-trek h1.title { font-size: 2rem !important; /* line-height: 1.8rem; padding: 0 1rem; font-weight: 500; */ /* border: 1px solid aqua; */ } @media screen and (min-width: 576px) { .page-view-calendrier-trek h1.title { padding: 0; font-size: 3rem !important; line-height: 2.8rem; } } .page-view-calendrier-trek .view-content.row { margin: 0.5rem 0 2rem 0; padding: 0 0.5rem; /* border: 1px solid var(--rouge); */ } .page-view-calendrier-trek h2 { font-weight: 600; margin: 1rem 0 0.5rem 0; color: #FFFFFF; } .page-view-calendrier-trek .sejour { display: flex; flex-wrap: nowrap; max-width: 600px; margin-bottom: 1.5rem; border: 1px solid #cecece; background-color: #FFFFFF; } .page-view-calendrier-trek .depart.visuel { max-width: 175px; } @media screen and (max-width: 768px) { .page-view-calendrier-trek .depart.visuel { display: none; } } .page-view-calendrier-trek .depart.infos { display: flex; flex-direction: column; justify-content: space-between; padding: 0.1rem 0.5rem; /* border: 1px solid var(--rouge); */ } .page-view-calendrier-trek h3.depart-titre { font-size: 1.25rem; } .page-view-calendrier-trek h3.depart-titre a { font-size: 1.25rem; color: var(--rouge); text-decoration: none; } .page-view-calendrier-trek h3.depart-titre a:visited, .page-view-calendrier-trek h3.depart-titre a:hover, .page-view-calendrier-trek h3.depart-titre a:active { text-decoration: none; } .page-view-calendrier-trek .sejour .depart.infos { font-size: 1rem; /* border: 1px solid var(--rouge); */ } /* .page-view-calendrier-trek .sejour .depart.infos .depart-dates { display: flex; flex-wrap: wrap; } */ .page-view-calendrier-trek .depart-etat, .page-view-calendrier-trek .depart-statut { text-transform: uppercase; } .page-view-calendrier-trek .depart-statut { font-weight: bold; } .page-view-calendrier-trek .depart-places { color: green; } /** fin de CALENDRIER **/ /*------------------------ CALENDRIER FLEX ------------------*/ /* .page-view-calendar-dates h1 { margin-bottom: 2rem; } .page-view-calendar-dates h2 { color: #FFFFFF; font-weight: bold; margin: 1.5rem 0; } .page-view-calendar-dates .calendrier-items { display: flex; flex-wrap: wrap; gap: 30px 10px; } .page-view-calendar-dates .calendrier-item { flex: 1; min-width: 355px; max-width: 400px; display: flex; flex-direction: column; align-items: flex-start; padding: 0.8rem; background-color: #FFFFFF; border-radius: 7px; box-sizing: border-box; border: 2px dotted var(--rouge); } .page-view-calendar-dates .calendrier-item h3 { font-size: 1.5rem; line-height: 1; } .page-view-calendar-dates .calendrier-item .nom-prenom { font-weight: 600; } .page-view-calendar-dates .calendrier-item h3 a:link, .page-view-calendar-dates .calendrier-item h3 a:visited, .page-view-calendar-dates .calendrier-item h3 a:hover, .page-view-calendar-dates .calendrier-item h3 a:active, .page-view-calendar-dates .calendrier-item .nom-prenom a:link, .page-view-calendar-dates .calendrier-item .nom-prenom a:visited, .page-view-calendar-dates .calendrier-item .nom-prenom a:hover, .page-view-calendar-dates .calendrier-item .nom-prenom a:active { color: var(--rouge); text-decoration: none; } */ /*------------------------ fin de CALENDRIER FLEX ------------------*/ /* =================================== FEATURED ====================================== */ body.path-frontpage .region-featured-bottom-first h2, body.path-frontpage .region-featured-bottom-second h2 { color: #FFFFFF; padding-top: 0.5rem; padding-left: 1rem; text-align: left; font-size: 2rem; font-weight: 900; font-size: clamp(1.5rem, calc(1.2rem + 4vw), 4.5rem); text-transform: uppercase; } /* ------------ BOTTOM FIRST -------------- */ body.path-frontpage .region-featured-bottom-first { width: 100vw; margin-left: calc(-50vw + 50%); left: 0; background-color: #264C5B; padding-bottom: 3rem; } body.path-frontpage .region-featured-bottom-first .view-content.row { margin: 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center; gap: 30px 20px; } body.path-frontpage .region-featured-bottom-first .views-row { width: 80px; min-width: 50px; background-color: #76d3d6; border-radius: 0.2rem; display: flex; flex-direction: column; } body.path-frontpage .region-featured-bottom-first .views-row .views-field-name-1 { /* décompte */ align-self: flex-end; position: relative; right: -13px; top: -13px; } body.path-frontpage .region-featured-bottom-first .views-row .views-field-field-icone-svg { /* icone */ padding-bottom: 0.5rem; } body.path-frontpage .region-featured-bottom-first .views-row .views-field-name { /* terme de taxo */ display: none; } body.path-frontpage .region-featured-bottom-first .views-field-name-1 .field-content { font-size: 1.2rem; background-color: var(--rouge); width: 45px; height: 30px; border-radius: 50rem; font-weight: bold; color: #FFFFFF; text-align: center; padding: 0.1rem 1rem 0.3rem 0.9rem; } @media screen and (min-width: 576px) { body.path-frontpage .region-featured-bottom-first .views-row { padding: 0.5rem; width: 130px; border-radius: 0.5rem; } body.path-frontpage .region-featured-bottom-first .view-content.row { margin: 3.5rem 1.5rem 2rem 1.5rem; gap: 20px; } body.path-frontpage .region-featured-bottom-first .views-row .views-field-name { display: block; padding: 0.25rem 0.2rem 0.5rem 0.2rem; text-align: center; font-size: 1.3rem; font-weight: 900; line-height: 95%; } body.path-frontpage .region-featured-bottom-first .views-row .views-field-name a { color: #000000; text-decoration: none; } } body.path-frontpage .region-featured-bottom-first .views-field-view-taxonomy-term { display: flex; justify-content: center; padding: 0.5rem; } /* ------------ fin de BOTTOM FIRST -------------- */ /* -------------- PAGE PARTICULARITES ---------- */ body.page-view-particularites .view-content.row { /* border: 1px solid aqua; */ display: flex; justify-content: center; align-items: flex-end; } body.page-view-particularites .views-view-responsive-grid { margin: 3rem; /* width: 90%; */ /* border: 1px solid #FFFFFF; */ } body.page-view-particularites .views-view-responsive-grid__item { max-width: 350px; background-color: #FFFFFF; border: 1px solid #FFFFFF; border-radius: 8px; } body.page-view-particularites .views-view-responsive-grid__item .views-field-name { display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.5rem 0.2rem 0.5rem; min-height: 6rem; /* border: 1px solid aqua; */ } body.page-view-particularites .views-view-responsive-grid .views-field-field-og-image-taxo { /* background-color: #FFFFFF; */ } body.page-view-particularites .views-view-responsive-grid .views-field-field-og-image-taxo img { border-radius: 20px; border: 8px solid #FFFFFF; } body.page-view-particularites .views-view-responsive-grid h3 a:link, body.page-view-particularites .views-view-responsive-grid h3 a:visited, body.page-view-particularites .views-view-responsive-grid h3 a:hover, body.page-view-particularites .views-view-responsive-grid h3 a:active { color: var(--rouge); text-decoration: none; } body.page-view-particularites .views-field-field-resume { height: 5rem; overflow-y: scroll; padding: 0 0.6rem 0.5rem 0.6rem; line-height: 98%; } /* -------------- fin de PAGE PARTICULARITES ---------- */ /* ------------ BOTTOM SECOND -------------- */ body.path-frontpage .region-featured-bottom-second { width: 100vw; min-height: 50vh; margin-left: calc(-50vw + 50%); left: 0; background-color: #1a4353; background-position-y: 120px; background-image: url('/sites/default/files/media/image/paysage-2800x320.png'); background-repeat: no-repeat; } body.path-frontpage .region-featured-bottom-second .view-content.row { display: flex; justify-content: center; align-items: flex-end; } body.path-frontpage .region-featured-bottom-second .views-view-responsive-grid { margin-top: 350px; margin-bottom: 3rem; width: 90%; } body.path-frontpage .region-featured-bottom-second .views-view-responsive-grid .views-view-responsive-grid__item { max-width: 350px; background-color: #FFFFFF; border: 1px solid #FFFFFF; border-radius: 8px; } body.path-frontpage .region-featured-bottom-second .views-view-responsive-grid .views-field-name { display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.5rem 0.2rem 0.5rem; min-height: 6rem; /* border: 1px solid aqua; */ } body.path-frontpage .region-featured-bottom-second .views-view-responsive-grid .views-field-field-og-image-taxo { /* background-color: #FFFFFF; */ } body.path-frontpage .region-featured-bottom-second .views-view-responsive-grid .views-field-field-og-image-taxo img { border-radius: 20px; border: 8px solid #FFFFFF; } body.path-frontpage .region-featured-bottom-second .views-view-responsive-grid h3 a:link, body.path-frontpage .region-featured-bottom-second .views-view-responsive-grid h3 a:visited, body.path-frontpage .region-featured-bottom-second .views-view-responsive-grid h3 a:hover, body.path-frontpage .region-featured-bottom-second .views-view-responsive-grid h3 a:active { color: var(--rouge); text-decoration: none; } body.path-frontpage .region-featured-bottom-second .views-view-responsive-grid .views-field-field-resume { height: 5rem; overflow-y: scroll; padding: 0 0.6rem 0.5rem 0.6rem; line-height: 98%; } @media screen and (min-width: 576px) { body.path-frontpage .region-featured-bottom-second .views-view-responsive-grid .views-field-field-resume { height: 6rem; overflow-y: scroll; /* padding: 0.5rem 0.8rem; background-color: #FFFFFF; */ } } /* ------------ fin de BOTTOM SECOND -------------- */ /* =================================== fin de FEATURED ====================================== */ /* FOOTER */ .site-footer .block { border: none; } #block-bk-activites-total { } #block-bk-activites-total h2 { border-bottom: none; border-color: rgba(255, 255, 255, 0.15); font-size: 1.5rem; margin-bottom: 0; padding-bottom: 3px; text-transform: uppercase; } div.wrapper.touslesguides { display:flex; flex-wrap: wrap; justify-content: center; align-items: center; } /* @media screen and (max-width: 576px) { div.wrapper.touslesguides { flex-wrap: wrap; align-items: baseline; } } */ div.icones.touslesguides { display: flex; align-items: center; } div.icones.touslesguides svg { height: 60px; width:60px; } div.texte.touslesguides { padding-left: 0.5rem; font-size: 1.3rem; line-height: 1.4rem; text-align: center; } div.touslesguides a:link { text-decoration: none; } /* FIN de FOOTER */ /***************** fin de TREK */ /*********** ADMIN TREKS ****************/ /**** MOI ***/ .page-node-67 article { margin: 3rem 0 ; } .page-node-67 /* article */ h3 { display: flex; justify-content: flex-end; margin: 1.5rem 0; } h3 a.lien-add-trek { text-align: right; } /* ------------------ ABONNEMENTS ----------------------*/ #block-block-total-abonnes, #block-bk-infos-contact { background-color: #FFFFFF; margin-bottom: 2rem; padding: 1rem; text-align: center; /* border: 10px solid aqua; */ } #block-block-total-abonnes .views-label, #block-block-total-abonnes .field-content { font-size: 1.5rem; } #block-block-total-abonnes .field-content { font-weight: bold; } .page-abonnement-add .view-header h2, .page-abonnement-add #block-bk-infos-contact h2 { font-size: 2.5rem; font-weight: bold; color: #000000; } .page-abonnement-edit .subscriber-edit-form, .page-abonnement-add .subscriber-add-form, .page-abonnement-add #block-bk-abonnes-guide, .page-abonnement-add #block-bk-abonnes-admin, .page-node-67 .views-element-container { border: solid 1px #000000; padding: 1.5rem; margin-bottom: 3rem; background-color: #FFFFFF; } .page-node-67 .views-element-container { margin-bottom: 0; } .page-node-67 .views-element-container h2 { font-weight: bold; } .page-node-67 #block-bk-infos-contact { max-width: 90%; margin: 0 auto 2rem auto ; } .page-abonnement-add #block-bk-abonnes-guide thead a, .page-abonnement-add #block-bk-abonnes-guide thead th, .page-abonnement-add #block-bk-abonnes-admin thead a, .page-abonnement-add #block-bk-abonnes-admin thead th, .page-abonnement-add #block-bk-infos-contact thead a, .page-abonnement-add #block-bk-infos-contact thead th, .page-node-67.user-logged-in thead a, .page-node-67.user-logged-in thead th { color: rgb(0, 0, 0); font-size: 1.2rem; } .page-abonnement-edit .identity-fields-container, .page-abonnement-add .identity-fields-container { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 5px; padding: 0.5rem; background: #f8f9fa; border-radius: 12px; border: 1px solid #e9ecef; } .page-abonnement-edit .identity-fields-container .form-item-email, .page-abonnement-add .identity-fields-container .form-item-email { grid-column: 1 / -1; } .page-abonnement-edit .identity-fields-container .form-item label, .page-abonnement-add .identity-fields-container .form-item label { font-weight: 600; color: #2c3e50; margin-bottom: 8px; display: block; } .page-abonnement-edit .identity-fields-container input[type="email"], .page-abonnement-edit .identity-fields-container input[type="text"], .page-abonnement-add .identity-fields-container input[type="email"], .page-abonnement-add .identity-fields-container input[type="text"] { width: 100%; padding: 12px 15px; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 16px; transition: all 0.3s ease; background: white; } /* Styles pour la documentation des statuts */ .page-abonnement-add .statut-documentation, .page-abonnement-edit .statut-documentation { background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; margin: 0.5rem 1rem 1rem 1rem; } .page-abonnement-add .statut-documentation summary, .page-abonnement-edit .statut-documentation summary { list-style: none; position: relative; padding: 15px 20px 15px 50px; /* Plus d'espace à gauche pour la grande flèche */ font-weight: 600; color: #495057; cursor: pointer; transition: all 0.3s ease; } .statut-documentation summary::before { content: ""; position: absolute; left: 10px; top: 50%; transform: translateY(-50%) rotate(0deg); width: 30px; /* Largeur agrandie */ height: 30px; /* Hauteur agrandie */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F44336'%3E%3Cpath d='M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; transition: transform 0.3s ease; } .statut-documentation[open] summary::before { transform: translateY(-50%) rotate(90deg); } .page-abonnement-edit .statut-documentation .details-title, .page-abonnement-add .statut-documentation .details-title { font-weight: 600; color: #495057; } .page-abonnement-add .statut-documentation-content, .page-abonnement-edit .statut-documentation-content { padding: 15px; background: white; border-radius: 0 0 8px 8px; } .page-abonnement-add .statut-documentation-content strong, .page-abonnement-edit .statut-documentation-content strong { color: #2c3e50; } .page-abonnement-add .statut-documentation-content ul { margin: 15px 0; padding-left: 20px; } .page-abonnement-add .statut-documentation-content li { margin-bottom: 10px; line-height: 1.5; } .page-abonnement-add #edit-newsletter-id-checkboxes, .page-abonnement-add #edit-statut, .page-abonnement-edit #edit-newsletter-id-checkboxes, .page-abonnement-edit #edit-statut { margin-left: 1rem; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 1rem; } .page-abonnement-add #edit-actions, .page-abonnement-edit #edit-actions { margin-top: 1rem; display: flex; justify-content: flex-end; } /* Tunning du filtre sur le statut des abonnés */ .page-abonnement-add .views-exposed-form .fieldset-wrapper .radio { /* border: 1px solid aqua; */ display: flex; flex-wrap: wrap; gap: 0.5rem; } .page-abonnement-add .views-exposed-form .fieldset-wrapper { margin-right: 1.5rem; } .page-abonnement-add .view-footer p { padding: 0 0.5rem; font-size: 0.9rem; font-style: italic; } /* ------------------ fin de ABONNEMENTS ----------------------*/ /* ----------------------------- MENU GUIDES ------------------------------ */ .menu-guides { display: flex; flex-wrap: wrap; justify-content: flex-end; max-width: 95%; gap: 0.5rem; } h3.menu-guides a:link, .page-node-67.user-logged-in h3 a:link, h3.menu-guides a:visited, .page-node-67.user-logged-in h3 a:visited { background-color: #76d3d6; color: rgb(0, 0, 0) !important; padding: 0.5rem; text-decoration: none; border-radius: 7px; } h3.menu-guides a:hover, .page-node-67.user-logged-in h3 a:hover, h3.menu-guides a:active, .page-node-67.user-logged-in h3 a:active{ background-color: #55989A; color: #FFFFFF !important; padding: 0.5rem; text-decoration: none; border-radius: 7px; } h3 a.lien-add-trek::before, h3 a.lien-moi::before, h3 a.lien-profil::before, h3 a.lien-abonnements::before, h3 a.lien-deconnexion::before { display: inline-block; vertical-align: middle; width: 1.8rem; height: 1.8rem; line-height: 1.8rem; padding-right: 0.5rem; transform: scale(1); /* mettre à l'échelle le SVG */ transform-origin: center; /* Centrez la mise à l'échelle */ border-radius: 7px; } h3 a.lien-add-trek::before { content: url("/sites/default/files/media/svg/creer-trek.svg"); } h3 a.lien-profil::before { content: url("/sites/default/files/media/svg/icone-guide-30px-noir.svg"); } h3 a.lien-deconnexion::before { content: url("/sites/default/files/media/svg/deconnexion.svg"); } h3 a.lien-moi::before { content: url("/sites/default/files/media/svg/dashboard.svg"); } h3 a.lien-abonnements::before { content: url("/sites/default/files/media/svg/newsletter.svg"); } /* ----------------------------- fin de MENU GUIDES ------------------------------ */ .page-abonnement-add #block-bk-abonnes-guide .tablesort--asc, .page-abonnement-add #block-bk-abonnes-guide .tablesort--desc, .page-abonnement-add #block-bk-abonnes-admin .tablesort--asc, .page-abonnement-add #block-bk-abonnes-admin .tablesort--desc, .page-node-67.user-logged-in .tablesort--asc, .page-node-67.user-logged-in .tablesort--desc { /* background-color: #f2270e; */ background-color: var(--rouge); } .page-abonnement-add #block-bk-abonnes-guide td.modifier a, .page-abonnement-add #block-bk-abonnes-admin td.modifier a, .page-node-67.user-logged-in td.voir a { text-decoration: none; background-color: var(--rouge); color: #FFFFFF; padding: 0.5rem; } .page-abonnement-add button.btn-primary, .page-abonnement-edit button.btn-primary, .page-node-67.user-logged-in button.btn-primary { /* background-color: #f2270e; */ background-color: var(--rouge); color: #ffffff; font-weight: bold; border:none; } /*.page-node-67 .views-field-email a,*/ .page-node-67 td a, .page-node-67 li.dropbutton-action a { /* color: #f2270e; */ color: var(--rouge); text-decoration: none; font-size: 1rem; font-weight: 500; } /* ------------------- DESTINATIONS LISTES node 92 -------------- */ .treks_destinations_listes { display: flex; flex-wrap: wrap; max-width: 95%; margin: 0 auto; justify-content: space-between; border-radius: 7px; padding: 1rem; background-color: #f9f9f9; gap: 1rem; margin: 1rem auto; } .treks_destinations_listes h2 a:link, .treks_destinations_listes h2 a:visited, .treks_destinations_listes h2 a:hover, .treks_destinations_listes h2 a:active { /* color: #f2270e; */ color: var(--rouge); text-decoration: none; } .treks_destinations_listes .view-content.row { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 1rem 0rem; font-size: 1.2rem; /* border: 1px solid aqua; */ } .treks_destinations_listes .row>* { width: auto; /* pour éviter que les tags destinations ne s'étirent sur la ligne car width: 100% dans un CSS annexe */ } .treks_destinations_listes .destination-nom-nombre { border: 2px solid var(--rouge); background-color: #FFFFFF; border-radius: 6px; padding: 0.5rem; text-decoration: none; font-weight: bold; color: var(--rouge); /* margin: 1rem; */ position: relative; /* display: flex; flex-wrap: nowrap; align-items: center; gap: 0.5rem; */ } .treks_destinations_listes .destination-nom-nombre:hover { /* background-color: #f2270e; */ background-color: var(--rouge); color: #FFFFFF; /* text-decoration: none; */ font-weight: bold; border-radius: 6px; } .treks_destinations_listes .destination-nom-nombre .destination-nom { padding-right: 35px; } .treks_destinations_listes .destination-nom-nombre .destination-nom a:link, .treks_destinations_listes .destination-nom-nombre .destination-nom a:visited, .treks_destinations_listes .destination-nom-nombre .destination-nom a:active { /* color: #f2270e; */ color: var(--rouge); text-decoration: none; } .treks_destinations_listes .destination-nom-nombre:hover .destination-nom a { color: #FFFFFF; text-decoration: none; } .treks_destinations_listes .destination-nom-nombre .destination-nombre { background-color: #000000; width: 45px; height: 30px; border-radius: 50rem; border: 1px solid #000000; font-weight: bold; color: #FFFFFF; text-align: center; margin-left: auto; padding: 0 0.3rem 0.6rem 0.3rem ; position: absolute; top: -5px; right:-8px; } .treks_destinations_listes .destination-nom-nombre:hover .destination-nombre, .treks_destinations_listes .destination-nom-nombre .destination-nombre:hover { background-color: #FFFFFF; color: #000000; border: 2px solid #000000; } .treks_destinations_listes .view-content.row a:hover { /* background-color: #f2270e; */ background-color: var(--rouge); color: #FFFFFF; /* text-decoration: none; */ font-weight: bold; border-radius: 6px; } */ /* ------------------ RECHERCHE ------------------- */ /* .recherche .view-content.row { max-width: 95% !important; border: 1px solid aqua !important; } */ .recherche form.views-exposed-form, .recherche-sejours form.views-exposed-form { display: flex; justify-content: center; } .view-header h2/* .recherche-resultats */ { margin-bottom: 1rem; color: #FFFFFF; padding: 0.8rem 0; font-weight: 600; } .page-node-106 .view-header h2 { color: #FFFFFF; padding-top: 0.5rem; padding-left: 1rem; text-align: left; font-size: 2rem; font-weight: 900; font-size: clamp(1.5rem, calc(1.2rem + 4vw), 4.5rem); text-transform: uppercase; } .page-node-92 .view-display-id-bk_destinations_recherche { margin: 1.5rem 0; padding: 1.5rem; } .recherche, .recherche-sejours.carte-monde .view-content.row /* .recherche .view-content.row */ { max-width: 95%; margin: 0 auto; /* border: 1px solid aqua; */ } .recherche div.d-flex.flex-wrap, .recherche-sejours div.d-flex.flex-wrap { flex: 0 1 auto !important; /* évite largeur 100% */ border-radius: 7px; padding: .5rem; padding-bottom: .2rem; background-color: #000000; gap: 0.2rem; margin-bottom: 1rem; /* border: 1px solid aqua; */ } .mb-3 { /* reduire l'espacement des select sur ecran etroit */ margin-bottom: 0.1rem!important; /* border: 1px solid aqua; */ } @media screen and (min-width: 576px) { .recherche div.d-flex.flex-wrap, .recherche-sejours div.d-flex.flex-wrap { padding: 1rem; padding-bottom: 0.5rem; gap: 0.5rem; } .mb-3 { margin-bottom: 1rem!important; /* border: 1px solid var(--rouge); */ } } .recherche label, .recherche-sejours label{ color: #FFFFFF; font-weight: bold; padding: 0 0 .3rem 1rem; } .recherche select, .recherche-sejours select { background-color: #fc8e80; font-weight: bold; } .recherche .btn-primary, .recherche-sejours .btn-primary { color: #FFFFFF; background-color: var(--rouge); border: solid 1px #FFFFFF; font-weight: bold; } .recherche .btn-primary:hover, .recherche-sejours .btn-primary:hover { background-color:#ca1e08; border: solid 1px #FFFFFF; } .recherche .view-empty, .recherche-sejours .view-empty { padding: 2rem; color: #FFFFFF; } .recherche .view-empty span.aucun, .recherche .view-empty h3, .recherche-sejours .view-empty span.aucun, .recherche-sejours .view-empty h3 { font-weight: bold; } .recherche .view-empty h3, .recherche-sejours .view-empty h3 { margin-top: 1.5rem; } .recherche .view-empty ul, .recherche-sejours .view-empty ul { font-size: 1.5rem; } .recherche .view-empty li, .recherche-sejours .view-empty li { margin-bottom: 1.5rem; } .recherche .view-empty span.tout, .recherche .view-empty span.reset, .recherche-sejours .view-empty span.tout, .recherche-sejours .view-empty span.reset { padding: 0.6rem 0.8rem; border: solid 1px #FFFFFF; border-radius: 0.375rem; font-weight: 800; font-size: 1rem; margin-left: 1rem; } .recherche .view-empty span.reset::before, .recherche-sejours .view-empty span.reset::before { display: inline-block; content: ""; background-image: url('data:image/svg+xml,'); background-repeat: no-repeat; -webkit-background-size: 1rem 1rem; background-size: 1rem 1rem; background-position: 0 0.25rem; width: 1.5rem; height: 1.2rem; } .recherche .view-empty span.tout, .recherche-sejours .view-empty span.tout { background-color: #fc8e80; color: #000000; } .recherche .view-empty span.reset, .recherche-sejours .view-empty span.reset { /* background-color: #f2270e; */ background-color: var(--rouge);} /* SELECT plus étroits */ .form-select { display: block; width: 100%; padding: .375rem 2.25rem .375rem .75rem; -moz-padding-start: calc(0.75rem - 3px); font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position:right .75rem center; background-size: 16px 12px; border: 1px solid #ced4da; border-radius: .375rem; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* ------------------------ RECHERCHE DEPARTS avec variable GROUPE GUIDE ------------------------- */ #block-bk-recherche-sejours > div > div { max-width: 1320px; width: 100%; margin: 0 auto; /* padding: 1rem; */ box-sizing: border-box; /* background-color: #1C5E71; */ /* background-color: yellow; */ } .recherche-departs-guide .view-content.row { display: grid; grid-gap: 30px; justify-content: center; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); grid-auto-rows: minmax(100px, auto); justify-items: center; background-color: aqua; } .recherche-departs-guide .views-row { flex: 1; width: 350px; display: flex; flex-direction: column; align-items: flex-start; /* padding: 0.8rem; */ /* background-color: #f1f1f1; */ background-color: #FFFFFF; border-radius: 7px; box-sizing: border-box; border: 2px dotted var(--rouge); } @media screen and (max-width: 360px) { /* 1x étroit */ .recherche-departs-guide { max-width: 350px; background-color: pink; } .recherche-departs-guide .view-content.row { grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 10px 2px; } .recherche-departs-guide .views-row { min-width: 350px; /* max-width: 600px; */ } } @media screen and (min-width: 361px) and (max-width: 576px) { .recherche-departs-guide { max-width: 576px; background-color: blueviolet; } .recherche-departs-guide .view-content.row { grid-template-columns: repeat(auto-fill, minmax(375px, 1fr)); gap: 30px 10px; } .recherche-departs-guide .views-row { min-width: 355px; /* max-width: 600px; */ } } @media screen and (min-width: 376px) and (max-width: 722px) { .recherche-departs-guide { max-width: 722px; background-color: darkorange; } .recherche-departs-guide .view-content.row { grid-template-columns: repeat(auto-fill, minmax(410px, 1fr)); gap: 30px 10px; } .recherche-departs-guide .views-row { min-width: 410px; /* max-width: 600px; */ } } @media screen and (min-width: 722px) and (max-width: 1164px) { .recherche-departs-guide { max-width: 1124px; background-color: deeppink; } .recherche-departs-guide .view-content.row { grid-template-columns: repeat(auto-fill, minmax(355px, 1fr)); gap: 30px 10px; } .recherche-departs-guide .views-row { min-width: 355px; /* max-width: 600px; */ } } @media screen and (min-width: 1165px) { .recherche-departs-guide { max-width: 1320px; background-color: green; } .recherche-departs-guide .view-content.row { grid-template-columns: repeat(auto-fill, minmax(410px, 1fr)); gap: 30px 1px; } .recherche-departs-guide .views-row { min-width: 410px; /* max-width: 600px; */ } } .recherche-departs-guide .views-row .field-content { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-direction: column; flex-direction: column; min-height: 300px; /* 300 est le minimum qui permet que les 3 blocs se répartissent correctement = bug affichage ! */ /* border: 2px dotted black; */ } .affiche-vue-departs .depart-wrapper { position: relative; } .affiche-vue-departs .depart-badge { display: flex; flex-direction: column; justify-content: center; gap: 3px; color: #ffffff; width:120px; height: 80px; padding: 0.2rem 0; text-align: center; border-radius: 5px; position: absolute ; } .recherche-depart .affiche-vue-departs .depart-badge { top: 150px; left: 213px; } .affiche-vue-departs.groupe-standard .depart-badge { top: 115px; left: 215px; } .affiche-vue-departs.groupe-superieur .depart-badge { top: 280px; left: 215px; } .affiche-vue-departs .depart-badge .depart-dates { font-size: 0.8rem; } .affiche-vue-departs .depart-badge .depart-statut { font-size: 1rem; font-weight: bold; letter-spacing: 0.1rem; } .recherche-departs-guide hr { border: 1px solid aqua; } .recherche-departs-guide .views-field-nid { /* ce div est le parent supérieur du niveau item */ width: 100%; /* étire le div sur toute la largeur */ font-size: 1rem; /* agit sur tous les textes dont la taille n'est pas définie */ } /* IMPORTANT !!! permet que le justify-content: space-between fonctionne réellement */ /*.recherche-departs-guide*/ .affiche-vue-departs .depart-titre-photo, /*.recherche-departs-guide*/ .affiche-vue-departs .depart-duree-date-guide-wrapper, /*.recherche-departs-guide*/ .affiche-vue-departs .depart-activite.depart-statut-places.depart-ft { min-height: 0; /* border: 1px solid var(--rouge); */ } /*.recherche-departs-guide*/ .affiche-vue-departs .depart-activite-wrapper { display: flex; flex-direction: column; justify-content: space-around; align-items: center; background-color: #76d3d6; padding: 0.6rem; width: 100%; height: 80px; max-width: 80px; min-height: 0; /* border: 1px solid var(--rouge); */ } /*.recherche-departs-guide*/ .affiche-vue-departs .depart-activite.texte { font-size: 0.7rem; line-height: 1; text-align: center; } /*.recherche-departs-guide*/ .affiche-vue-departs .depart-activite.svg { width: 40px; } .recherche /*.recherche-departs-guide*/ .affiche-vue-departs .depart-statut { font-size: 1.2rem; font-weight: bold; } /*.recherche-departs-guide*/ .affiche-vue-departs .depart-ft-wrapper { display: flex; justify-content: flex-end; /* align-items: flex-end; */ flex-wrap: wrap; flex-grow: 1; } /*.recherche-departs-guide*/ .affiche-vue-departs .depart-prix-apartirde { font-size: 0.8rem; } /*.recherche-departs-guide*/ .affiche-vue-departs .depart-prix.monnaie { font-size: 0.8rem; } /*.recherche-departs-guide*/ .affiche-vue-departs .depart-prix-montant-monnaie { display: flex; } /*.recherche-departs-guide*/ .affiche-vue-departs .depart-fiche-technique .download-file a { font-size: 1rem; } /*.recherche-departs-guide*/ .affiche-vue-departs .depart-titre-photo { /* border: 1px solid aqua; */ display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; /* padding-left: 0.5rem; */ } .affiche-vue-departs .depart-titre-sejour a:link, .affiche-vue-departs .depart-titre-sejour a:visited, .affiche-vue-departs .depart-titre-sejour a:hover, .affiche-vue-departs .depart-titre-sejour a:active { font-size: 1.5rem; color: var(--rouge); text-decoration: none; font-weight: bold; line-height: 1; /* border: 1px solid var(--rouge); */ } /*.recherche-departs-guide*/ .affiche-vue-departs .nom-prenom a:link, /*.recherche-departs-guide*/ .affiche-vue-departs .nom-prenom a:visited, /*.recherche-departs-guide*/ .affiche-vue-departs .nom-prenom a:hover, /*.recherche-departs-guide*/ .affiche-vue-departs .nom-prenom a:active { color: var(--rouge); text-decoration: none; font-weight: 600; } .page-view-recherche-sejours .content .depart-photo { margin-left: 0.1rem; } .page-view-recherche-sejours .content .depart-photo img { max-width: 122px !important; /* important : force la non-fluidité des vignettes imposée par Bootstrap */ /* aspect-ratio: 122 / 68.5; */ } /*.recherche-departs-guide*/ .affiche-vue-departs .depart-duree-date-wrapper { margin: 0.5rem 0; display: flex; flex-wrap: wrap; /* border: 1px solid aqua; */ } /*.recherche-departs-guide*/ .affiche-vue-departs .depart-duree.nombre, /*.recherche-departs-guide*/ .affiche-vue-departs .depart-prix.montant { font-size: 1rem; font-weight: bold; } /*.recherche-departs-guide*/ .affiche-vue-departs .depart-duree.suffixe, /*.recherche-departs-guide*/ .affiche-vue-departs .depart-duree.texte{ font-size: 0.8rem; } /*.recherche-departs-guide*/ .affiche-vue-departs .depart-guide-wrapper { margin: 0.5rem 0; } /*.recherche-departs-guide*/ .affiche-vue-departs .depart-guide.nom-prenom { font-weight: 900; } /* ---------------------- ADMIN --------------- */ .admin-etats.admin-massifs { padding: 1rem; background-color: #FFFFFF; } /* ------------------- H1 TREK FULL ----------------- */ #image-hero { position: relative; width: 100%; /* border: 1px solid var(--rouge); */ } #image-hero .og_image_hero { width: 100%; } #image-hero .titre_hero { position: absolute; top: 50%; left: 50%; /* top: 0; left: 0; */ transform: translate(-50%, -50%); color: white; text-align: center; font-family: 'Montserrat', sans-serif; font-size: clamp(1.5rem, calc(1.2rem + 4vw), 5rem); font-weight: bold; padding : 0.75rem 1rem; text-shadow: 2px 2px 18px rgba(0, 0, 0, 0.8); /* Ombre pour meilleure lisibilité */ width: 100%; /* max-width: 80%; */ /* Empêche le titre d'être trop large */ margin: 0 auto; z-index: 10; line-height: 1.1; /* border: 1px solid aqua; */ } /* ----------------------------- RECHERCHE GROUPE ---------------------- */ /* ------------------------ RECHERCHE DEPARTS avec variable GROUPE GUIDE ------------------------- */ body.path-frontpage .view-particularites .view-footer, body.path-frontpage .recherche-groupe .view-footer { display: flex; justify-content: center; padding: 3rem 0; } body.path-frontpage .view-footer h4.particularites-tous, body.path-frontpage .recherche-groupe .view-footer h4.confirme-tous { margin-bottom: 0.2rem; margin-top: -5px; display: inline-block; padding: .5rem 1rem; font-size: 1.3rem; text-transform: uppercase !important; line-height: 1.3333333; border-radius: 0.375rem; color: #ffffff; background-color: #df382c; text-decoration: none; text-align: center; font-weight: bold; border: 1px solid #ffffff; } body.path-frontpage .view-footer h4.particularites-tous:hover, body.path-frontpage .recherche-groupe .view-footer h4.confirme-tous:hover { color: #ffffff; background-color: var(--rouge-fonce); text-decoration: none; border: 1px solid #d4d4d4; } body.path-frontpage .view-footer h4.particularites-tous a:link, body.path-frontpage .view-footer h4.particularites-tous a:visited, body.path-frontpage .view-footer h4.particularites-tous a:hover, body.path-frontpage .view-footer h4.particularites-tous a:active, body.path-frontpage .recherche-groupe .view-footer h4.confirme-tous a:link, body.path-frontpage .recherche-groupe .view-footer h4.confirme-tous a:visited, body.path-frontpage .recherche-groupe .view-footer h4.confirme-tous a:hover, body.path-frontpage .recherche-groupe .view-footer h4.confirme-tous a:active { text-decoration: none; color: #FFFFFF; } body.path-frontpage .view-footer h4.particularites-tous::before, body.path-frontpage .recherche-groupe .view-footer h4.confirme-tous::before { display: inline-block; width: 24px; height: 24px; margin: 0 0.5rem -0.3rem 0; background-image: url("/sites/default/files/media/svg/ico-tous.svg"); background-size: contain; background-repeat: no-repeat; content: ""; } .view-particularites .view-content.row, .recherche-groupe .view-content.row { display: block; column-width: 350px; column-gap: 10px; max-width: 100%; margin: 0 auto; text-align: center; /* border: 1px solid aqua; */ } .view-particularites .views-field-field-resume { text-align: left; } .recherche-groupe .view-content.row .views-row { height: 100%; width: 350px !important; display: inline-block; padding: 0 !important; border-radius: 7px 7px 0 0; /* border: 1px solid #FFFFFF; */ box-sizing: border-box; background-color: #FFFFFF; margin: 0 auto 50px; vertical-align: top; /* Empêche la coupure dans les colonnes */ break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; } .recherche-groupe .views-field-nid { /* ce div est le parent supérieur du niveau item */ width: 350px !important; font-size: 1rem; /* agit sur tous les textes dont la taille n'est pas définie */ } .recherche-groupe .views-row .field-content { /* display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-direction: column; flex-direction: column; */ } .recherche-groupe .affiche-vue-departs { /* background-color: yellow; */ } /* .page-view-calendar-dates h1 { margin-bottom: 2rem; } .page-view-calendar-dates h2 { color: #FFFFFF; font-weight: bold; margin: 1.5rem 0; } .page-view-calendar-dates .calendrier-items { display: flex; flex-wrap: wrap; gap: 30px 10px; } .page-view-calendar-dates .calendrier-item { flex: 1; min-width: 355px; max-width: 400px; display: flex; flex-direction: column; align-items: flex-start; padding: 0.8rem; background-color: #FFFFFF; border-radius: 7px; box-sizing: border-box; border: 2px dotted var(--rouge); } .page-view-calendar-dates .calendrier-item h3 { font-size: 1.5rem; line-height: 1; } .page-view-calendar-dates .calendrier-item .nom-prenom { font-weight: 600; } .page-view-calendar-dates .calendrier-item h3 a:link, .page-view-calendar-dates .calendrier-item h3 a:visited, .page-view-calendar-dates .calendrier-item h3 a:hover, .page-view-calendar-dates .calendrier-item h3 a:active { color: var(--rouge); text-decoration: none; } */ .recherche-depart .calendrier-groupe-mois-annee { max-width: 95%; } .recherche-depart div.calendrier-groupe-mois-annee:not(:first-of-type) h2::before { content: ""; display: block; border-top: 2px solid #FFFFFF; margin: 40px 0; width: 100%; } .recherche-depart h2 { color: #FFFFFF; font-weight: bold; margin: 1.5rem 0; } .recherche-depart ul.calendrier-items { display: flex; flex-wrap: wrap; gap: 30px 10px; justify-content: space-evenly; list-style-type: none; /* border: 1px solid aqua; */ } .recherche-depart .affiche-vue-departs .depart-wrapper { background-color: #FFFFFF; } .recherche .affiche-vue-departs .depart-wrapper { text-align: left; width: 350px; position: relative; border: 1px solid #d1d1d1; border-radius: 7px 7px 0 0 ; } .recherche-depart .affiche-vue-departs .depart-wrapper img, .recherche-groupe .affiche-vue-departs .depart-photo-carree img, .recherche-groupe .affiche-vue-departs .depart-photo-16-9 img { border-radius: 7px 7px 0 0 ; } /* ------- NB PLACES -------- */ .recherche-depart .depart-places { position: absolute; top: 0; left: 0; width: auto; height: 48px; color: #000000; background-color: #000000; color: #FFFFFF; border-top-left-radius: 20rem; border-top-right-radius: 50rem; border-bottom-right-radius: 50rem; border-bottom-left-radius: 0; border: 1px solid #000000; padding: 0.4rem 1rem 0.8rem 0.4rem; text-align: center; } .recherche-depart .depart-places .depart-places-nombre { font-size: 1.2rem; /* background-color: #FFFFFF; */ background-color: #519741;; width: 45px; height: 30px; border-radius: 50rem; border: 2px solid #FFFFFF; font-weight: bold; /* color: #000000; */ color: #FFFFFF; text-align: center; margin-left: auto; padding: 0.1rem 1rem 0.3rem 0.9rem; } .recherche-depart .depart-places .depart-places-texte { font-size: 1rem; font-weight: 600; padding-left: 0.2rem; } /* ------- fin de NB PLACES -------- */ .recherche h4.confirme-tous { margin-bottom: 1.5rem; } .recherche h4.confirme-tous a:link, .recherche h4.confirme-tous a:visited, .recherche h4.confirme-tous a:hover, .recherche h4.confirme-tous a:active { /* border: 1px solid aqua; */ color: #ffffff; } .recherche .depart-titre { text-align: left; padding : 0.3rem 0.5rem; background-color: #FFFFFF; display: flex; flex-direction: column; justify-content: center; } .recherche.recherche-depart .depart-titre { min-height: 100px; /* border-bottom: 1px solid var(--rouge); */ } .recherche h3 { line-height: 1; } .recherche h3 a:link, .recherche h3 a:visited, .recherche h3 a:hover, .recherche h3 a:active { color: var(--rouge); text-decoration: none; } .recherche .affiche-vue-departs .depart-badge { display: flex; flex-direction: column; justify-content: center; gap: 3px; /* background-color: #339933;*/ /* color: #ffffff; */ width:135px; height: 50px; padding: 0.2rem 0; text-align: center; border-top-left-radius: 50rem; border-bottom-left-radius: 50rem; /* border-radius: 50rem; */ position: absolute ; border: 1px solid #000000; border-right: none; } .inscription-statut-places .departs-statut { width:135px; max-height: 50px !important; padding: 0.2rem 0; text-align: center; border-top-left-radius: 50rem; border-bottom-left-radius: 50rem; } .inscription-statut-places .departs-statut.confirme, .recherche .affiche-vue-departs .depart-badge-confirme { background-color: #339933; border-top: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; border-right: none; } .inscription-statut-places .departs-statut.ouvert, .recherche .affiche-vue-departs .depart-badge-ouvert { background-color: #86ba86; } .inscription-statut-places .departs-statut.projet, .recherche .affiche-vue-departs .depart-badge-en_projet { background-color: #a3a3a3; } .inscription-statut-places .departs-statut.complet, .recherche .affiche-vue-departs .depart-badge-complet { background-color: #a486ad; } .inscription-statut-places .departs-statut.groupe, .recherche .affiche-vue-departs .depart-badge-groupe { background-color: #626262; } .recherche-groupe .affiche-vue-departs.groupe-standard .depart-badge { top: 150px; right: 0px; } .recherche-groupe .affiche-vue-departs.groupe-superieur .depart-badge, .recherche-groupe .affiche-vue-departs.groupe-premium .depart-badge { top: 310px; right: 0; } .recherche .affiche-vue-departs .depart-badge .depart-statut { font-size: 1rem; font-weight: bold; letter-spacing: 0.1rem; } .recherche .affiche-vue-departs .depart-statut { font-size: 1.2rem; font-weight: bold; } .recherche .affiche-vue-departs .depart-badge-confirme .depart-statut { /* border: 2px solid #FFFFFF; */ font-size: 1.2rem; font-weight: 900; } .recherche .affiche-vue-departs .depart-etat { background-color: #0c2b34; padding: 0.8rem 0 0.6rem 0.8rem; color: #FFFFFF; font-style: italic; } .recherche-depart .depart-date-wrapper { text-align: center; } .recherche-depart .depart-date { font-size: 1.2rem; font-weight: 900; } .recherche-depart .depart-date .texte { font-weight: 400; } .recherche .affiche-vue-departs .depart-fiche-technique { background-color: #FFFFFF; display: flex; justify-content: center; align-items: center; padding: 1rem 0 0.5rem 0; } .recherche .affiche-vue-departs .depart-fiche-technique .download-file a { font-size: 1.1rem; font-weight: bold; } /* ----------------- CARTE LEAFLET ----------- */ .marker-cluster-small div { background-color: var(--rouge); } .marker-cluster-small { background-color: rgba(242, 39, 14, 0.3); } .marker-cluster div { /* width: 30px; height: 30px; margin-left: 5px; margin-top: 5px; text-align: center; border-radius: 15px; */ font: 18px "Helvetica Neue", Arial, Helvetica, sans-serif; color: #FFFFFF; } .leaflet-popup-content { font-size: 0.9rem; /* margin: 13px 24px 13px 20px; line-height: 1.3; font-size: 13px; min-height: 1px; */ } .leaflet-popup-content a:link, .leaflet-popup-content a:visited, .leaflet-popup-content a:hover, .leaflet-popup-content a:active { color: var(--rouge); font-weight: 800; text-decoration: none; } .leaflet-container a.leaflet-popup-close-button { color: var(--rouge); } /* ------------ ERREUR 404 ---------- */ .node--type-page #content { max-width: 95%; margin: 0 auto; /* border: 1px solid var(--rouge); */ } .node--type-page h1.title { margin-bottom: 2rem; } .node--type-page div.node__content { display: flex; flex-direction: column; justify-content: center; /* border: 1px solid aqua; */ } .node--type-page .field--type-image { /* border: 1px solid var(--rouge); */ width: 100%; display: flex; justify-content: center; } .page-node-91 div.node__content h2, .page-node-91 div.node__content h3 { /* color: #FFFFFF; */ margin: 1rem 0; } .node--type-page .field--name-body, .page-vocabulary-particularites .field--name-description, .taxonomy-term.vocabulary-etats .field--name-description, .taxonomy-term.vocabulary-massifs .field--name-description { margin: 2rem 0.5rem; padding: 1.5rem; border-radius: 6px; background-color: #FFFFFF; color: #000000; font-size: 1.2rem; } .node--type-page .field--name-body h2, .page-vocabulary-particularites .field--name-description h2, .taxonomy-term.vocabulary-etats .field--name-description h2, .taxonomy-term.vocabulary-massifs .field--name-description h2, .node--type-page .field--name-body h3, .page-vocabulary-particularites .field--name-description h3, .taxonomy-term.vocabulary-etats .field--name-description h3, .taxonomy-term.vocabulary-massifs .field--name-description h3 { font-weight: bold; } .node--type-page .field--name-body a:link, .page-vocabulary-particularites .field--name-description a:link, .taxonomy-term.vocabulary-etats .field--name-description a:link, .taxonomy-term.vocabulary-massifs .field--name-description a:link, .node--type-page .field--name-body a:visited, .page-vocabulary-particularites .field--name-description a:visited, .taxonomy-term.vocabulary-etats .field--name-description a:visited, .taxonomy-term.vocabulary-massifs .field--name-description a:visited, .node--type-page .field--name-body a:hover, .page-vocabulary-particularites .field--name-description a:hover, .taxonomy-term.vocabulary-etats .field--name-description a:hover, .taxonomy-term.vocabulary-massifs .field--name-description a:hover, .node--type-page .field--name-body a:active, .page-vocabulary-particularites .field--name-description a:active, .taxonomy-term.vocabulary-etats .field--name-description a:active, .taxonomy-term.vocabulary-massifs .field--name-description a:active { color: var(--rouge); text-decoration: none; } /* ------- COOKIES RGPD KLARO ------- */ #klaro-cookie-notice { box-shadow: none !important; background-color: #FAFAFA !important; outline: none !important; } .klaro .cn-body { border: none !important; } .klaro .cn-buttons { display: flex !important; width: 100%; justify-content: space-between; } .klaro .cm-btn.cm-btn-danger.cn-decline { color: #000000; border: none !important; background-color: #FAFAFA ; box-shadow: none; } .klaro .cm-btn.cm-btn-danger.cn-decline:hover { /* color: #000000; */ border: none !important; background-color: #FAFAFA !important ; /* box-shadow: none; */ } .klaro .cm-btn.cm-btn-success { color: #FFFFFF !important; background-color: var(--rouge) !important ; border: 2px solid var(--rouge) !important; font-weight: bold !important; } .klaro .cm-btn.cm-btn-success:hover { color: var(--rouge) !important; background-color: #FFFFFF !important ; border: 2px solid var(--rouge) !important; font-weight: bold !important; } /* ------------ HOMEPAGE ------------- */ /* ------------ IDENTIFICATION ------------- */ body.path-entrer .block.block-system-main-block, body.path-validate-otp .block.block-system-main-block { /* border: 1px solid aqua; */ margin: 3rem; } body.path-entrer small#edit-email--description, body.path-validate-otp small#edit-otp--description { /* border: 1px solid aqua; */ margin-top: 1rem; padding: 1rem 0.5rem; color: #FFFFFF !important; } body.path-entrer input.form-control, body.path-validate-otp input.form-control { width: auto; margin-bottom: 1rem; } /* ------------ fin de IDENTIFICATION ------------- */ /* -------------- EMOJI --------------- */ .emoji { } .emoji-m { font-size: 2rem; padding: 0 1rem; } /* ------------- CONTACT FORM --------------- */ body.path-user .groupe-vous { display: flex; flex-wrap: wrap; border: 1px solid aqua; } body.path-user #edit-message-wrapper .form-type-textarea label { /* border: 1px solid aqua; */ color: #FFFFFF; font-size: 1.3rem; margin-bottom: 1rem; } /* --------- FOOTER ----------*/ footer.site-footer h2 { font-size: 1.5rem; font-weight: bold; } footer.site-footer a:hover { text-decoration: none; } footer.site-footer .view-particularites .view-content.row, footer.site-footer .view-activites .view-content.row { margin-top: 0.25rem; } footer.site-footer .view-particularites .views-row, footer.site-footer .view-activites .views-row { /* display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; line-height: 95%; */ padding-top: 0.25rem; font-size: 1rem; font-weight: normal; min-height: 35px; text-align: left; /* border: 1px solid aqua; */ } @media screen and (max-width: 576px) { footer.site-footer .view-activites .views-row .views-field-field-icone-svg .no-image-style.image-style-vignette-xxs { width: 48px; } footer.site-footer .view-activites .views-field-name-1 { font-size: 1.5rem; } } footer.site-footer .view-activites .views-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; padding-top: 0.25rem; line-height: 95%; /* font-size: 1rem; font-weight: bold; */ } footer.site-footer .view-activites .views-row .views-field-field-icone-svg .no-image-style.image-style-vignette-xxs { /* change la couleur de l'icone noir > gris */ filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(105%) contrast(100%); /* jouer sur invert(50%) pour varier le gris */ } footer.site-footer .view-activites .views-row .views-field-field-icone-svg .no-image-style.image-style-vignette-xxs:hover { /* change la couleur de l'icone noir > gris */ filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(105%) contrast(100%); /* :HOVER */ } footer.site-footer #block-itak-barrio-anepasmanquer .field--name-body, footer.site-footer #block-itak-barrio-guidesdirect .field--name-body { background-color: transparent; margin: 0; padding: 0; } footer.site-footer #block-itak-barrio-anepasmanquer .field--name-body a:link, footer.site-footer #block-itak-barrio-anepasmanquer .field--name-body a:visited, footer.site-footer #block-itak-barrio-anepasmanquer .field--name-body a:active, footer.site-footer #block-itak-barrio-guidesdirect .field--name-body a:link, footer.site-footer #block-itak-barrio-guidesdirect .field--name-body a:visited, footer.site-footer #block-itak-barrio-guidesdirect .field--name-body a:active { color: #FFFFFF; font-size: 1rem; font-weight: normal; text-decoration: underline; } footer.site-footer #block-itak-barrio-anepasmanquer .field--name-body a:hover, footer.site-footer #block-itak-barrio-guidesdirect .field--name-body a:hover { color: #FFFFFF; text-decoration: none; } footer.site-footer .sejour-groupe a::before { content: ""; display: inline-block; width: 24px; height: 24px; background-image: url("/sites/default/files/media/svg/groupe.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; vertical-align: middle; margin-right: 8px; /* Optionnel : espace entre l'icône et le texte */ filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(105%) contrast(100%); /* :HOVER */ } footer.site-footer .sejour-groupe a::before:hover { } /* MAINTENANCE */ body.maintenance-page #page, body.maintenance-page #main-wrapper { background-color: #FFFFFF !important; } body.maintenance-page h1 { color: #000000 !important; } /* TABLEAUX */ hr.espacement-table { margin: 2.5rem; } table.alignement-vertical-milieu td { vertical-align: middle; } table.alignement-vertical-milieu h3 { font-size: 2.5rem; } table.alignement-vertical-milieu tr:nth-child(1), body.page-node-139 th { background-color: #e2e2e2; } table.alignement-vertical-milieu tr:nth-child(even){ background-color: #f9f9f9; } /* tableau /argumentaire */ body.page-node-139 tr { background-color: #FFFFFF !important; }