/*
Theme Name: Derailleurs 2026
Theme URI: https://www.derailleursdeclamart.org
Author: Matt
Author URI: https://www.derailleursdeclamart.org
Description: Thème des Dérailleurs de Clamart
Version: 1.0
*/

<!--* { margin:0; padding: 0; padding-block: 0px; padding-inline: 0px; }-->



<!-- 
#207ea9 bleu site web origine

#1b6a8d bleu foncé hover 

#B9E1F3 bleu clair rond logo
#60C4EC bleu perso logo
#DD2A2B rouge logo
#F7A627 orange logo

#5bbae0 bleu perso logo en plus foncé 

#f4f9fc bleu ciel clair 

#0f172a bleu foncé footer site sophie

background-color:rgba(255, 255, 255, 1);
-->

        /* Réinitialisation simple */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #f7fbfd; /* e8f8ff */
            color: #222;
            line-height: 1.6;
			 line-height: 1;
        }

        /* Conteneur principal */
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
        }

        /* Header */
        header {
            background-color: #fff;
            color: 222;
            padding: 0px 0;
        }

        header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

header form.search input.search { margin-right: 0px; margin-top: 2px;  border-radius: 15px; background:white; color: black; border:0; height:20px; padding: 0 10px 0 10px; }
header form.search input.button { cursor: pointer; vertical-align: middle; margin-top: -1px; }




		header .bar {
			 display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #5bbae0;
            color: white;
			padding: 6px ; 
			margin: 0; 
        }

		header .bar .social a {
			padding-left: 8px;
			vertical-align: middle; line-height:0.5;
		}

		a.logo {
			line-height: 0.5;
			padding: 0;
			margin: 0;
		}


        nav {
            display: flex;
            gap: 20px;
        }

        nav a {
            color: #707B8A;
			font-weight: bold;
            text-decoration: none;
			padding: 8px 0;
        }
        nav a:hover {
            color: #DD2A2B;
        }

		nav a.selected { color: #DD2A2B; border-bottom : 2px solid #DD2A2B; } 

		nav a.adherer { border-radius: 15px; background: #F7A627; color: white; text-decoration: none; padding: 8px 10px 8px 10px;  } 
		nav a.adherer:hover { background: #DD2A2B;  } 



        /* Contenu principal */
        main {
            padding: 20px 0;
        }

        .hero {
            background: white;
            padding: 40px;
            border-radius: 10px;
            text-align: center;
            margin-bottom: 20px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        .hero h1 {
            font-size: 2.5rem;
            margin-bottom: 15px;
			color: #DD2A2B; text-align: center;
        }

		.hero .page { text-align: justify; 
				padding: 0px 160px 0px 160px;
				line-height: normal;

		}

.hero h2 a, .hero h3 a { color: #DD2A2B; text-decoration: none; }
.hero h2 a:hover, .hero h3 a:hover { text-decoration:underline; }
		
.hero div.search { padding: 0px 160px 0px 160px;
				line-height: normal; text-align: justify; }
.hero div.search article { margin-bottom: 20px; }


		.hero .page p, .hero .page h2, .hero .page h3, .hero .page h4, .hero .page ul { margin-bottom: 10px; }
		.hero .page ul li { margin-left: 15px; }
.hero .page h3.divider { color: #DD2A2B; width: 100%; border-bottom: 2px solid #DD2A2B; }


		.hero .page a { color: black; text-decoration: underline; text-decoration-style: dotted; }
		.hero .page a:hover { color: #DD2A2B; text-decoration-style: solid; }
	img.aligncenter { display: block;
  margin: auto;}

.hero .page p img.imgleft { float:left; margin: 0 10px 10px 0; border-radius: 10px;}
.hero .page p img.imgright { float:right; margin: 0 0 10px 10px; border-radius: 10px;}

		.hero .post { text-align: justify; 
				padding: 0px 160px 0px 160px;
				line-height: normal;

		}
		.hero .post p, .hero .post h2, .hero .post h3, .hero .post h4, .hero .post ul, .hero .post span.info { margin-bottom: 10px; }
.hero .post div.info { color: gray; font-size: small; text-align:center; }
.hero .post div.content { margin-top: 15px;  }

		.hero .post ul li { margin-left: 15px; }

		.hero .post a { color: black; text-decoration: underline; text-decoration-style: dotted; }
		.hero .post a:hover { color: #DD2A2B; text-decoration-style: solid; }
	img.aligncenter { display: block;
  margin: auto;}

.alignleft{float:left}.alignright{float:right}.textleft{text-align:left}.textright{text-align:right}




 
/*.hero .presentation { display: grid; grid-template-columns: 1fr 1fr; padding: 0px 0 0 0; } */
.hero .punchline { margin: 0 0 20px 0; font-size: 3.3rem; line-height: 1; font-weight: 800;}
.hero .punchline span { color: #5bbae0; }
.hero .prez { text-align: justify; font-size: 1.3rem; margin: 0 0 20px 0; }
.hero .links { line-height: 3;  text-align: center; margin-bottom: 0px; }
.hero .topnumbers { display: grid; grid-template-columns: repeat(4, 1fr); padding: 30px 0 0 0; }
.hero .topnumbers .topnumber { text-align:center; color: #64748B; text-transform: uppercase; font-size: 12px; font-weight: bold; }
.hero .topnumbers .topnumber span { color: #5bbae0; font-size: 48px; font-weight: bold; }

.hero a.button { border-radius: 15px;  font-weight: bold; text-decoration: none; padding: 8px 10px 8px 10px; margin: 0 10px; } 
		.hero a.button:hover  { background: #DD2A2B; border: 2px solid #DD2A2B; color: white; } 
.hero a.colorA {background: #5bbae0; border: 2px solid #5bbae0; color: white;}
.hero a.colorB {background: white; border: 2px solid #5bbae0; color: #5bbae0;} 

.hero .pictures { display: grid; grid-template-columns: repeat(3, 1fr); padding: 20px 0 0 0; width: 100%;  }
.hero .pictures img { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); border-radius: 10px; margin: 10px; }

        /* Grille de cartes */
        .cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }
		
		 /* Grille de cartes */
        .cards2 {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .card {
            background: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

article.news { text-align: center;}
        .card h2, .card h3 {
            margin-bottom: 10px;
        }

h2.news { color: #707B8A; margin-bottom: 20px; text-align: center;}

.card img.attachment-post-thumbnail {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	border-radius: 10px;
}

.card h2 a, .card h3 a { color: #DD2A2B; text-decoration: none; }
.card h2 a:hover, .card h3 a:hover { text-decoration:underline; }

        /* Footer */
        footer {
            background-color: #0f172a;
            color: #94a3b8;
            text-align: center;
            padding: 15px 0;
            margin-top: 20px;
        }

		footer .card { 
		background:#1e2a46 ;
		}
		
		footer .card a { 
		color: #94a3b8; text-decoration: none;
		}
		footer .card a:hover { 
		text-decoration: underline;
		}
footer .card h2 { color: white;}
		
		footer section.theend {
			font-size:80%;
			border-top: 1px dashed #405262; 
			margin-top:15px;
			padding-top: 15px;
		
		}
		footer section.theend a {
			color: #94a3b8;
			text-decoration: none;
		}
		footer section.theend a:hover {
			text-decoration: underline;
		}

        /* =========================
           VERSION MOBILE
           ========================= */

        @media (max-width: 768px) {

            header .container {
                flex-direction: column;
                gap: 15px;
            }

            nav {
                flex-direction: column;
                align-items: center;
                gap: 10px;
            }

            main {
                padding: 20px 0;
            }

            .hero {
                padding: 25px 15px;
            }

            .hero h1 {
                font-size: 2rem;
            }

            .cards {
                grid-template-columns: 1fr;
            }
            .cards2 {
                grid-template-columns: 1fr;
            }

            .card {
                padding: 20px;
            }
			
			nav a.accueil {
				display: none;
				
			}
			
			nav a { padding: 0;}
			
			nav a.selected { border-bottom : 0px; } 
			
			header .bar {		
			margin: 6px 0; 
			}

.hero .presentation { display: grid; grid-template-columns: 1fr; padding: 0px 0 0 0; } 
.hero .punchline { margin: 0 0 10px 0; font-size: 1.75rem; line-height: 1; font-weight: 800;font-family: Poppins, sans-serif; }
.hero .prez { font-size: 1rem; }
.hero .topnumbers { display: grid; grid-template-columns: repeat(2, 1fr); padding: 30px 0 0 0; }
.hero .topnumbers .topnumber { font-size: 12px; margin-bottom: 10px; }
.hero .topnumbers .topnumber span { font-size: 36px; }

.hero .pictures { display: grid; grid-template-columns: 1fr; }
.hero .pictures img { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); border-radius: 10px; margin: 10px; }
			
.hero .page { padding: 0px; }
.hero .post { padding: 0px; }
			
        }