/*!
Theme Name: Superville
Author: JulienRZ
Version: 2.0
License: GNU General Public License v3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

/* REMISE A ZERO DES STYLES PAR DÉFAUT DES NAVIGATEURS
-------------------------------------------------------------- */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */


html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

main {
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

body, p, h1, h2, h3, h4, h5, h6  {
	margin-block-start: 0;
  margin-inline-end: 0;
}

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

b,
strong {
  font-weight: 600;
}

em {
    font-style: italic;
}

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

button,
input { /* 1 */
  overflow: visible;
}

button,
select { /* 1 */
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}



/* TYPO
-------------------------------------------------------------- */

@font-face {
    font-family: 'abordage';
    src: url('fonts/abordage-regular.woff2') format('woff2'),
         url('fonts/abordage-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'plougastel';
    src: url('fonts/plougastel.woff2') format('woff2'),
         url('fonts/plougastel.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'restic';
    src: url('fonts/restic-carre-bold.woff2') format('woff2'),
         url('fonts/restic-carre-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'superville';
    src: url('fonts/superville-regular.woff2') format('woff2'),
         url('fonts/superville-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* TEXTE COURANT
-------------------------------------------------------------- */

body, p, .texte-courant, .grand-texte, .legende, h1, h2, h3, h4, h5, h6  {
	font-weight: normal;
	color: #fe3239;
	text-align: left; 
}

.page-contenu p {
  margin-block-start: 0em;
  margin-block-end: 0.7em;
}

.page-contenu h1 {
  margin-block-start: 0.7em;
  margin-block-end: 0.7em;
}

.page-contenu h2, .page-contenu h3 {
  margin-block-start: 0em;
  margin-block-end: 0.4em;
}

.page-contenu h4, .page-contenu h5, .page-contenu h6 {
  margin-block-start: 0em;
  margin-block-end: 0.5em;
}

body, p, .texte-courant, .grand-texte, .legende {
	font-family: 'abordage', Arial, Helvetica, sans-serif;
}

body, .texte-courant {
	font-size: 18px;
	line-height: 22px;
}

.grand-texte {
	font-size: 24px;
	line-height: 27px;
}

.legende {
	font-size: 11px;
	line-height: 19px;
}

/* TITRES
-------------------------------------------------------------- */

h1  {
  font-family: 'superville';
	font-size: 70px;
	line-height: 46px;
}

h2, h3, h4, h5, h6, #menu-principal li  {
  font-family: 'restic';
  text-transform: uppercase;
}

h2 {
  font-size: 83px;
	line-height: 70px;
}

h3 {
  font-size: 51px;
	line-height: 43px;
}

h4 {
  font-size: 35px;
	line-height: 30px;
}

h5 {
  font-size: 23px;
	line-height: 22px;
}

h6, #menu-principal li {
  font-size: 20px;
	line-height: 19px;
}

/* TEXTES SPECIAUX
-------------------------------------------------------------- */

.plougastel {
  font-family: 'plougastel';
	font-size: 24px;
	line-height: 27px;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

.texte-centre {
  text-align: center;
}

.texte-droite {
  text-align: right;
}

.texte-gauche {
  text-align: left;
}

.texte-italique {
  font-style: italic;
}

.texte-minuscule {
  text-transform: lowercase;
}

/* LIENS
-------------------------------------------------------------- */

a:link , a:visited {
	color:#bb33d8;
  text-decoration: underline;
}

a:hover {
	color: #886dee;
	text-decoration: none;
}

.lien-rouge a:link , .lien-rouge a:visited {
	color:#fe3239;
  text-decoration: none;
}

.lien-rouge a:hover {
	color: #fe3239;
	text-decoration: underline;
}

.faux-lien {
  cursor:pointer;
}

/* STYLES DE CARACTÈRE
-------------------------------------------------------------- */

.texte-rouge {
	color: #fe3239;
}

.texte-mauve {
	color: #bb33d8;
}

.texte-lavande {
  color:#886dee;
}

/* STYLES DE BLOCS
-------------------------------------------------------------- */

.bordure-rouge {
  border: 1px solid #fe3239;
}

.fond-gris, body {
	background-color:#f4f0f0;
}

.fond-lavande {
	background-color:#edd0f8;
}

.fond-mauve {
	background-color:#bb33d8;
}

.fond-jaune {
	background-color:#f1efa2;
}

.opacite70 {
  opacity: 0.7;
}


/* ALIGNEMENTS
-------------------------------------------------------------- */

.alignleft{ display:block; float:left; }

.alignright{ display:block; float:right; }

.aligncenter{ text-align:center;  }


/* MEDIA
images grandes : 1400px de large > galerie defilante
images moyennes : 640px de large > bloc libre texte & images
vignettes : 150*150px crop > page "Les Membres"
-------------------------------------------------------------- */

img {
	max-width:100%;
	height:auto;
}

.bloc-libre-page img {
  border: 1px solid #fe3239;
}

/* ===== Galerie Swiper ===== */
.galerie-page {
    border: 1px solid #fe3239;
    box-sizing: border-box;
    width: 95vw;    
    max-width: 1400px;
    height: 800px;     /* hauteur fixe de la galerie */
    position: relative;
    overflow: hidden;
    margin-bottom: 10px; 
}

.galerie-page .swiper-wrapper {
    height: 100%;
}

.galerie-page .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.galerie-page .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* remplissage complet, recadrage si nécessaire */
    display: block;
}

.galerie-page .swiper-button-next,
.galerie-page .swiper-button-prev {
    color: #fe3239; 
}

.galerie-page .swiper-pagination-bullet {
    width: 1em;      
    height: 1em;
    border: 1px solid #fe3239;
    background-color: #fff;
    opacity: 1;       
    margin: 0 6px !important;
}

.galerie-page .swiper-pagination-bullet-active {
    background-color: #fe3239;
    border-color: #fe3239;
}



/* MAQUETTE GLOBALE
-------------------------------------------------------------- */

body {
}

#header-site {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    display: flex;
    justify-content: center;
    pointer-events: none; /* important overlay */
}

#logo-superville {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  pointer-events: auto;
}


/* MENU
-------------------------------------------------------------- */

#menu-principal {
    pointer-events: auto;
    z-index: 20;
}

.menu-superville {
    list-style: none;
    margin: 0;
    display: flex;
    gap: 15px;
    padding: 12px 15px 12px 15px;
    border: 1px solid #fe3239;
    background: #fff;
}

.menu-superville li {
    position: relative;
}

.menu-superville a {
    text-decoration: none;
    color: #fe3239;
    transition: 0.25s ease;
}

/* Hover */
.menu-superville a:hover {
    opacity: 0.6;
}

/* Puces */
.menu-superville li:not(:last-child)::after {
    content: "•";
    color: #fe3239;
    margin-left: 15px;
}

/* MENU ÉCRANS < 600px
-------------------------------------------------------------- */

#petit-menu {
  display: none;
}

#bouton-petit-menu {
  display: none;
}

#contenu-petit-menu {
  display: none;
}

/* LOGO
-------------------------------------------------------------- */

#logo-superville {
  
}

/* PAGE D'ACCUEIL
-------------------------------------------------------------- */

#accueil {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

#titre-accueil {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 90vh;
}

#logo-titre-accueil {

}

#logo-titre-accueil img {
  max-width: 700px;
  width: 80%;
  height: auto;
  margin-bottom: 20px;
}

#baseline-titre-accueil {

}

#chapo-accueil {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 320px;
  border: 1px solid #fe3239;
  background: #fff;  
  padding: 25px;
  z-index: 4;
}

#contact-accueil {
  position: absolute;
  right: 40px;
  bottom: 40px;
  z-index: 4;
  transform: rotate(-12deg);
  background: #fff;  
  border: 1px solid #ff2d2d;
  padding: 8px 14px;
}

#fond-accueil {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
}

#fond-accueil img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}


/* 
PAGES "À PROPOS"
> titre
> chapô
> galerie defilante pleine page
> bloc libre texte & images 
-------------------------------------------------------------- */

/* PAGES "MEMBRE"
+ standard
  > titre
  > chapô + bloc libre texte & images  | infos pratiques
+ écran < 800px
  > titre
  > chapô
  > infos pratiques
  > bloc libre texte & images 
-------------------------------------------------------------- */

/* PAGES "RENCONTRE"
> titre
> chapô | infos pratiques
> galerie defilante pleine page
> bloc libre texte & images 
-------------------------------------------------------------- */

/* PAGES "L'ADHÉSION" "RESSOURCES" "RÉSEAUX" "CONTACT"
> titre
> chapô
> bloc libre texte & images 
-------------------------------------------------------------- */

.page-standard {
  padding-top: 130px;
  padding-bottom: 100px;
}

.titre-page, .chapo-page, .bloc-libre-page {
  max-width: 642px;
  padding-left: 200px;
}

.titre-page {

}

.chapo-page {
  
}

.info-page {
  
}

.galerie-page {
  width: 95vw;
  max-width: 1400px;
}

.bloc-libre-page {
  
}

/* Pages avec une colonne infos pratiques
-------------------------------------------------------------- */

.deux-colonnes {
  display: flex;
}

.colonne-A {
  max-width: 842px;
}

.colonne-B {
  max-width: 200px;
  padding-left: 100px;
}

/* PAGE "LES RENCONTRES"
> blocs d'images + légendes
-------------------------------------------------------------- */

#page-rencontres {

}

.grille-rencontres {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.vignette-rencontre {
}

.image-rencontre {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
}

.infos-rencontre {
    text-align: center;
    padding: 14px 10px;
    margin-bottom: 20px;
}

.date-rencontre {

}

.ville-rencontre {

}



/* PAGE "LES MEMBRES"
+ standard
  > cartographie pleine page
  > titre
  > chapô | #tags membres
  > liste des membres
+ #tag membre
  > titre
  > titre #tag membre
  > liste des membres filtrée
-------------------------------------------------------------- */

#carte-membres {
  position: relative;
  height: 800px;
  width: 100vw;
}

#contenu-carte-membres {
    width: 100%;
    height: 800px;
}

#overlay-carte-membres {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 800px;
  background-color: #bb00ff;
  mix-blend-mode: overlay;
  opacity: 1;
  pointer-events: none;
  z-index: 500;
}

.popup-image, .popup-texte {
  position: absolute;
}

.popup-image{
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
}

.popup-image img{
  border-radius:50%;
}

.popup-texte {
  top: 75px;
  left: 130px;
  min-width: 150px;
  padding: 10px;
}

.leaflet-popup-tip, .leaflet-popup-close-button {
  display: none !important;
}

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: transparent !important;
  color: transparent !important;
  box-shadow: none !important;
}

.liste-membres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
  gap: 40px;
  padding-left: 200px;
  margin-top: 20px;
}

.champs-activite {
}

.champs-activite li {
  list-style: none;
}

.vignette-membre {
  text-align: center;
}

.image-vignette-membre {
  width: 150px;
  height: 150px;
  margin: 0 auto 15px; 
}

.image-vignette-membre img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.legende-vignette-membre {
  margin: 10px 0 5px;
}


/* AUTRES PAGES
-------------------------------------------------------------- */

.page-404 {
  position: relative;
  margin: auto;
  max-width: 300px;
}

/* ADAPTATION SMARTPHONE ET TABLETTE
-------------------------------------------------------------- */

@media screen and (max-width: 1200px) {
	
}


@media screen and (max-width: 1000px) {

}


@media screen and (max-width: 900px) {

  .menu-superville {
    flex-wrap: wrap; 
    justify-content: center;
    gap: 16px;
  }

  .menu-superville a {
    font-size: 12px;
  }  

}


@media screen and (max-width: 800px) {

}


@media screen and (max-width: 500px) {

}

@media screen and (max-width: 400px) {

}


@media screen and (max-width: 350px) {

}

@media screen and (max-width: 300px) {

}