/*************************************************/
/* Generic                                       */
/*************************************************/
body {
	font-family: PT Sans Caption;
	line-height: 1;
}
a {
	text-decoration: none;
	cursor: pointer;
}
a:any-link  {
}
a:any-link:hover  {
	text-decoration: underline;
}
a:any-link:focus  {
	text-decoration: underline;
}
a:any-link:active  {
	color: red;
}
.page {
    max-width: 90%;
	display: grid;
    gap: 10px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    padding: 0 15px;
}
/****** Titre de la page ******/
.titre {
	grid-area: titre;
	text-align: center;
	border-radius: 10px;
}
.titre img{
	width: 90%;
}
/****** Menu ******/
.menu {
	grid-area: menu;
	border-radius: 10px;
}
.mcol {
	margin: auto;
}
.mcol:hover{
}
/****** Articles du club ******/
.blog {
	grid-area: blog;
	overflow-y: scroll;
	margin: 0px;
	padding: 5px;
	text-align: justify;
	border-radius: 10px;
}
.blog h1 {
	text-align: center;
	margin-top: 15px;
	margin-bottom: 5px;
	font-size: x-large;
}
.blog img {
	border-radius: 10px;
	border: 0;	
}
.blog p {
	text-align: justify;
	font-size: medium;
	margin-bottom: 0px;
}
.publiedate {
	border-bottom: 1px black dotted;
	margin-top: 2px;
	text-align: end;
	font-size: 10px;
	font-style: italic;
}
.article {
}
/****** Réseaux sociaux ******/
.news {
	grid-area: news;
    margin: 0px;
    overflow: auto;
	padding: 5px;
	border-radius: 10px;
	display: grid;
	grid-template-areas:
		"whatsapp instagram strava";
	align-items: center;
    justify-items: center;
}
.news h1 {
	text-align: center;
    font-size: larger;
}
.whatsapp {
	grid-area: whatsapp;
}
.instagram {
	grid-area: instagram;
}
.strava {
	grid-area: strava;
}
.stravad {
	grid-area: stravad;
}
/****** titre le bureau ******/	
.le_bureau {
	grid-area: le_bureau;
	display: grid;
	text-align: center;
	grid-template-columns: repeat(3, 1fr);
	grid-template-areas:
		"titreb titreb titreb"
		"membre1 membre2 membre3";
}
.titreb {
	grid-area: titreb;
}
.membre1 {
	grid-area: membre1;
}
.membre2 {
	grid-area: membre2;
}
.membre3 {
	grid-area: membre3;
}
/************/	
/****** titre les infos ******/	
.les_infos {
	grid-area: les_infos;
	border-radius: 10px;
	padding: 10px;
}
.titref {
	grid-area: titref;
	text-align: center;
}
.asterix {
	grid-area: asterix;
	font-size: smaller;
}
.tarif {
	grid-area: tarif;
}
.nat {
	grid-area: nat;
}
.velo {
	grid-area: velo;
}
.cap {
	grid-area: cap;
}
.les_infos p{
	text-align: center;
	margin: 0;
}
/************/	
/****** logo bas de page ******/
.logobas {
	grid-area: logobas;
	text-align: center;
	align-content: center;
}
.logobas img {
	width: 100%;
}
/****** Formulaire de contact ******/
.formcontact {
	grid-area: formcontact;
	text-align: center;
	display: grid;
	padding-left: 5px;
	padding-right: 5px;
	border-radius: 10px;
}
.formcontact form {
	margin: 10px;
	grid-row: 3;
	display: grid;
	grid-template-rows: repeat(4, 1fr);
}
.formcontact form label {
	text-align: left;
	margin-top: 5px;
}
.formcontact form input {
}
.formcontact form textarea {
}
.btcontact {
	grid-area: btcontact;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	margin-left: auto;
	margin-top: 5px;
}
.btcontact:hover {
}
.message {
	grid-area: message;
    margin-top: 20px;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
}
.success {
	grid-area: success;
}
.error {
	grid-area: error;
}
/****** Logos de partenaire ******/
.partenaires {
	grid-area: partenaires;
    display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-areas:
        "titrep titrep"
        "colpat01 colpat02";
	text-align: center;
}
.titrep {
	grid-area: titrep;
	text-align: center;
}
.colpat01 {
	grid-area: colpat01;
}
.colpat02 {
	grid-area: colpat02;
}
/************/	
/****** Mentions légales ******/
.ML {
	grid-area: ML;
	text-align: center;
	font-size: smaller;
    margin-bottom: 5px;
    margin-top: 15px;
	margin-left: auto;
   	margin-right: auto;	
}
/****** Remonter en haut ******/
.enhaut {
	grid-area: enhaut;
	position: fixed;
	bottom: 20px;
	right: 20px;
	padding: 2px 10px;
	border-radius: 5px;
	z-index: 1000;
	cursor: pointer;
	font-size: x-large;
}
/* Bannière cookies */
.cookie-banner {
	grid-area: cookie-banner;
	display: none; 
	position: fixed; 
	bottom: 0; 
	left: 0; 
	right: 0; 
	padding: 15px; 
	text-align: center; 
	z-index: 1000; 
	font-size: 14px;
}
.accept-cookies {
	grid-area: accept-banner;
	margin-left: 10px; 
	padding: 5px 10px; 
	border: none; 
	cursor: pointer;
}					 
/*************************************************/
/* Extra Style du bouton ON/OFF                  */
/*************************************************/
    .switch {
      position: relative;
      display: inline-block;
      width: 45px;
      height: 20px;
      margin: 5px;
    }

    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      transition: 0.4s;
      border-radius: 34px;
    }

    .slider:before {
      position: absolute;
      content: "";
      height: 12px;
      width: 12px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      transition: 0.4s;
      border-radius: 50%;
    }

    input:checked + .slider {
      background-color: #14bccd;
    }

    input:checked + .slider:before {
      transform: translateX(26px);
    }
/*************************************************/
/* Extra iCal								     */
/*************************************************/
/****** AGENDA ******/
.agenda {
	grid-area: agenda;
	border-radius: 10px;
	overflow-y: scroll;
	height: 450px; 
}
/*.agenda iframe{
	border-radius: 10px;
}*/
    #events-container {
      padding: 15px;
    }
    .event-type {
	  font-size: x-small;
      font-style: italic;
    }
    .event-title {
      margin: 5px 0;
      text-align: center;
    }
    .event-date {
    	font-size: smaller;
    }
    .event-time {
    	font-size: smaller;
    }
    .error {
      color: red;
      text-align: center;
      font-weight: bold;
    }
    .loading {
      text-align: center;
      font-style: italic;
    }
    .event-type-entrainement {
    	margin-bottom: 5px;
    }
    .event-type-competitions {
    	margin-bottom: 5px;
    }
    .event-type-actions_club {
    	margin-bottom: 5px;
    }
    .event-type-entrainement .event-type {
    }
    .event-type-competitions .event-type {
    }
    .event-type-actions_club .event-type {
    }
/* AGENDA des compétitions */
.event-place {
	text-align: end;
    font-size: small;
}
.event-orga {
    display: none;
}
.event-place:hover .event-orga {
    display: block;
	text-align: end;
    font-size: small;
}
.event-distance {
    display: none;
}
.event-title:hover .event-distance {
    display: block;
	text-align: center;
    font-size: small;
}
.sourcecompet {
    text-align: end;
    padding: 5px;
    font-size: small;
}
.btncompet {}
/*************************************************/
/* Extra nav								     */
/*************************************************/
  nav {
  }
  /* --- Le bouton hamburger --- */
  .menu-toggle {
    display: none;
  }

  .menu-btn {
    display: inline-block;
    cursor: pointer;
    width: 30px;
    height: 22px;
    position: relative;
    margin-left: 10px;
    margin-top: 3px;
  }

  .menu-btn span {
    position: absolute;
    height: 4px;
    width: 100%;
    background: #fff;
    left: 0;
    transition: 0.3s;
    border-radius: 10px;
  }

  .menu-btn span:nth-child(1) { top: 0; }
  .menu-btn span:nth-child(2) { top: 9px; }
  .menu-btn span:nth-child(3) { top: 18px; }

  /* --- Animation croix quand actif --- */
  .menu-toggle:checked + .menu-btn span:nth-child(1) {
    transform: rotate(45deg);
    top: 9px;
  }
  .menu-toggle:checked + .menu-btn span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle:checked + .menu-btn span:nth-child(3) {
    transform: rotate(-45deg);
    top: 9px;
  }

  /* --- Menu caché par défaut --- */
  .menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
  }

  .menu ul li {
  }

  .menu ul li a {
    display: block;
    padding: 5px;
    text-decoration: none;
    margin-left: 5px;
  }

  .menu ul li a:hover {
  }

  /* --- Affichage du menu quand actif --- */
  .menu-toggle:checked ~ ul {
    display: block;
  }

  /* --- Version bureau : menu toujours visible --- */
  @media(min-width: 768px) {
    .menu-btn { display: none; }
    .menu ul {
      display: flex !important;
      background: none;
    }
    .menu ul li {
      border: none;
    }
    .menu ul li a {
      padding: 10px 15px;
    }
  }
/*************************************************/
/* Extra small devices (phones, 600px and down) */
/*************************************************/
@media only screen and (max-width: 949px) {
	.page {
	    grid-template-columns: repeat(1, 1fr);
		grid-template-areas:
   	    	"titre"
   	     	"menu"
   	     	"agenda"
   	     	"blog"
   	     	"les_infos"
   	     	"le_bureau"
   	 		"logobas"
   	 		"formcontact"
   	 		"news"
   	 		"partenaires"
	        "ML";
	}
	/****** Titre de la page ******/
	.titre {
		font-size: xx-small;
	}
	/****** Menu ******/
	.menu {
	}
	.mcol {
	}
	/****** AGENDA ******/
	.agenda {
	}
	/****** Articles du club ******/
	.blog {
		height: 400px;
	}
	.blog img {
	    width: 50px;
	    height: auto;
	}
	/****** Nouvelles par Trimag ******/
	.news {
		height: 90px;
	}
	.stravad {
		display: none;
	}
	.whatsapp {}
	.instagram {}
	.strava {}
	/****** titre le bureau ******/	
	.le_bureau {
	}
	.titref {
	}
	/************/	
	/****** titre le bureau ******/	
	.les_infos {
		display: block;
	}
	.titref {
	}
	.asterix {
	}
	.tarif {
	}
	.nat {
	}
	.velo {
	}
	.cap {
	}
	/************/	
	/****** logo bas de page ******/
	.logobas {
	}
	/****** Formulaire de contact ******/
	.formcontact {
	}
	/****** Logos de partenaire ******/
	.partenaires {
	}
	.colpat01 {}
	.colpat02 {}
	/************/	
	/****** Mentions légales ******/
	.ML{
    }
}
/***************************************************************************/
/* Screen large devices (portrait tablets and large phones, 800px and up) */
/*************************************************************************/
@media only screen and (min-width: 950px) and (max-width: 1299px) {
	.page {
	    grid-template-columns: repeat(5, 1fr);
		grid-template-areas:
			"titre titre titre titre titre" 
			"menu menu menu menu menu"
			"agenda blog blog blog blog"
			"news blog blog blog blog"
			"le_bureau le_bureau les_infos les_infos les_infos"
			"logobas formcontact formcontact partenaires partenaires"
			"ML ML ML ML ML";
	}
	/****** Titre de la page ******/
	.titre {
	}
	/****** Menu ******/
	.menu {
	}
	.mcol {
		grid-row: 1;
	}
	/****** AGENDA ******/
	.agenda {
	}
	/****** Articles du club ******/
	.blog {
		height: 550px;
	}
	.blog img {
	}
	/****** Nouvelles par Trimag ******/
	.news {
		height: 90px;
	}
	.whatsapp {}
	.instagram {}
	.strava {}
	.stravad {}
	/****** titre le bureau ******/	
	.le_bureau {
	}
	.titreb {
	}
	.membre1 {
	}
	.membre2 {
	}
	.membre3 {
	}
	/************/	
	/****** titre les infos ******/	
	.les_infos {
		display: block;
	}
	.titref {
	}
	.asterix {
	}
	.tarif {
	}
	.nat {
	}
	.velo {
	}
	.cap {
	}
	/************/	
	/****** logo bas de page ******/
	.logobas {
	}
	/****** Formulaire de contact ******/
	.formcontact {
	}
	/****** Logos de partenaire ******/
	.partenaires {
	}
	.colpat01 {}
	.colpat02 {}
	/************/	
	/****** Mentions légales ******/
	.ML {
	}
}
/***************************************************************************/
/* Screen large devices (portrait tablets and large phones, 800px and up) */
/*************************************************************************/
@media only screen and (min-width: 1300px) {
	.page {
	    grid-template-columns: repeat(5, 1fr);
		grid-template-areas:
			"titre titre titre titre titre" 
			"menu menu menu menu menu"
			"agenda agenda blog blog blog"
			"news news blog blog blog"
			"le_bureau le_bureau les_infos les_infos les_infos"
			"logobas formcontact formcontact partenaires partenaires"
			"ML ML ML ML ML";
	}
	/****** Titre de la page ******/
	.titre {
	}
	/****** Menu ******/
	.menu {
	}
	.mcol {
		grid-row: 1;
	}
	/****** AGENDA ******/
	.agenda {
	}
	/****** Articles du club ******/
	.blog {
		height: 550px;
	}
	.blog img {
	}
	/****** Nouvelles par Trimag ******/
	.news {
		height: 90px;
	}
	.whatsapp {}
	.instagram {}
	.strava {}
	.stravad {}
	/****** titre le bureau ******/	
	.le_bureau {
	}
	.titreb {
	}
	.membre1 {
	}
	.membre2 {
	}
	.membre3 {
	}
	/************/	
	/****** titre les infos ******/	
	.les_infos {
		display: grid;
		gap: 10px;
		grid-template-areas: "titref titref titref titref"
							 "nat velo cap tarif"
							 "asterix asterix asterix asterix";
	}
	.titref {
	}
	.asterix {
	}
	.tarif {
	}
	.nat {
	}
	.velo {
	}
	.cap {
	}
	/************/	
	/****** logo bas de page ******/
	.logobas {
	}
	/****** Formulaire de contact ******/
	.formcontact {
	}
	/****** Logos de partenaire ******/
	.partenaires {
	}
	.colpat01 {
	}
	.colpat02 {
	}
	/************/	
	/****** Mentions légales ******/
	.ML {
	}
}