.reset-zone-garderies html {
color: #222;
font-size: 1em;
line-height: 1.4;
}

.reset-zone-garderies hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}

.reset-zone-garderies audio,
.reset-zone-garderies canvas,
.reset-zone-garderies iframe,
.reset-zone-garderies img,
.reset-zone-garderies svg,
.reset-zone-garderies video {
vertical-align: middle;
}

.reset-zone-garderies fieldset {
border: 0;
margin: 0;
padding: 0;
}

.reset-zone-garderies textarea {
resize: vertical;
}


.reset-zone-garderies h1, .reset-zone-garderies h2, .reset-zone-garderies h3 {
    font-family: 'baloo_paajiregular';
    color: #0c0c55 !important;
    font-size: 22px !important;
}

.reset-zone-garderies body {
font-family: "Baloo 2", sans-serif;
font-weight: 400;
font-style: normal;
margin: 0;
padding: 0;
font-size: 16px;
}

.reset-zone-garderies html { font-size: 62.5%; } 
.reset-zone-garderies body { font-size: 1.6rem; } 
.reset-zone-garderies h1   { font-size: 2.4rem; } 
.reset-zone-garderies h2   { font-size: 2.2rem; } 


/* image banniere mobil */
.reset-zone-garderies .section-banniere-mobil {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto;
gap: 20px;
width: 100%;
position: relative;


}

.reset-zone-garderies .section-banniere-mobil a:hover {
color: #709bff;
}



.reset-zone-garderies .image-banniere-mobil img {
width: 100%;
height: 400px;
object-fit: cover;
object-position: 25%;
}


.reset-zone-garderies .text-overlay-mobil {
position: absolute;
top: 70%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
text-align: center;
color: rgb(12, 12, 85);
background-color: hsl(0, 0%, 100%);
padding: 0px;
padding-top: 20px;
opacity: 80%;
border-radius: 5px;
}

.reset-zone-garderies .text-overlay h1 {
font-size: 2rem;
margin-bottom: 10px;
}



.reset-zone-garderies .texte-banniere {
grid-column: 1;
padding: 10px;
}




/* image banniere desktop */
.reset-zone-garderies .section-banniere-desktop {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto;
gap: 20px;
width: 100%;
position: relative;
}
.reset-zone-garderies .section-banniere-desktop a:hover {
color: #709bff;
}


.reset-zone-garderies .image-banniere-desktop img {
width: 100%;

}

.reset-zone-garderies .text-overlay-desktop {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: rgb(12, 12, 85);
background-color: #ffffff;
padding: 30px 20px 20px 20px;
opacity: 80%;
border-radius: 5px;
}

.reset-zone-garderies .text-overlay h1 {
font-size: 2rem;
margin-bottom: 10px;
}

.reset-zone-garderies .text-overlay p {
font-size: 16px;
}

.reset-zone-garderies .texte-banniere {
grid-column: 1;
padding: 10px;
}


/*Caché par défaut en version mobile */

/* page accueil */
.reset-zone-garderies .titre-section-accueil{
padding-left: 30px;}
.reset-zone-garderies .voir-tout {
text-align: right;
padding-right: 30px;
}

.reset-zone-garderies .voir-tout a:hover {
color: #709bff;
}




.reset-zone-garderies .container-garderie-accueil {
display: grid;
grid-template-columns: 1fr; 
padding-top: 30px;
padding-bottom: 30px;
}

.reset-zone-garderies .left-column {
background-color: #fdf7c9; 
padding: 20px;
}

.reset-zone-garderies .right-column img {
width: 100%; 
height: 100%; 
object-fit: cover; 
}

.reset-zone-garderies .blue-box {
border: none;
font-size: 24px;
color: #333;
padding: 10px;
margin: 20px 0;
border-left: 4px solid #fd0000;
background-color: #ecf5ff;
}
.reset-zone-garderies .container-garderie-accueil img{
object-position: 10%;}

.reset-zone-garderies .bouton-voir-tout
{padding-top: 10px;
padding-bottom:10px ;
align-items: center;
text-align: center; 
}

.reset-zone-garderies .bouton-accueil-garderie
{padding-top: 10px;
padding-bottom:10px ;
align-items: center;
}
/* intro garderie */
.reset-zone-garderies .intro-garderie {
margin: 30px;
display: grid;
grid-template-columns: repeat(2, 1fr);
}

.reset-zone-garderies .image-intro img {
height: 350px;
/* Hauteur maximale du conteneur */
margin: 10px;
object-fit: cover;
}

.reset-zone-garderies img.intro {
width: 100%;
}
.reset-zone-garderies main > section.intro-garderie > div.tx-intro > blockquote {
border: none;
font-size: 24px;
color: #333;
padding: 10px;
margin: 20px 0;
border-left: 4px solid #fd0000;
background-color: #ecf5ff;
}
.reset-zone-garderies .tx-intro p a:hover{
color: #709bff;
}

/* catégorie  garderie*/
.reset-zone-garderies .cat-intro {
text-align: center;
background-color: #fef6e2;
padding: 30px;
}

.reset-zone-garderies .back-pair {
background-color: #fef6e2;
padding: 30px;
}

.reset-zone-garderies .back-impair {
padding: 30px;
}

.reset-zone-garderies .catégorie-jouets img {
object-fit: cover;
width: 100%;
}

.reset-zone-garderies .bouton-cat {
display: inline-block;
padding: 10px 20px;
background-color: #004080;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}

.reset-zone-garderies .bouton-cat:hover {
background-color: #0d6cd1;
}

.reset-zone-garderies .bouton-formulaire {
display: inline-block;
padding: 10px 20px;
background-color: #db1010;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}

.reset-zone-garderies .bouton-formulaire:hover {
background-color: #730000;
color: #fff;

}



/* formulaire garderie */
.reset-zone-garderies .formulaire-tx {
margin-right: 30px;
}

.reset-zone-garderies .formulaire-section {
display: grid;
grid-template-columns: repeat(1, 1fr);
background-color: #e2f4fe;
padding: 30px;
}


.reset-zone-garderies .form-garderie {
display: grid;
grid-template-columns: 1fr;
}

.reset-zone-garderies .form-container {
border: 2px solid #3a2c85;
background-color: #e2f4fe;
border-radius: 10px;
/*width: 90%;*/

}

.reset-zone-garderies .form-container h3 {
margin: 20px;
color: #3a2c85;
}

.reset-zone-garderies .form-container form {
display: flex;
flex-direction: column;
padding: 20px;

}

.reset-zone-garderies .form-container label {
color: #3a2c85;
margin-bottom: 5px;
width: 100%;
}

.reset-zone-garderies .form-container input {
padding: 8px;
margin-bottom: 10px;
margin-right: 20px;
border: 1px solid #709bff;
border-radius: 5px;
width: 90%;
}

.reset-zone-garderies .form-container select {
padding: 8px;
margin-bottom: 10px;
margin-right: 20px;
border: 1px solid #709bff;
border-radius: 5px;
width: 97%;
}

.reset-zone-garderies .form-container button {
background-color: #f61824;
color: #ffffff;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}

.reset-zone-garderies .form-container button:hover {
background-color: #b00000;
}




/* carte blog*/

.reset-zone-garderies .card-blog {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}

.reset-zone-garderies .card {

gap: 1rem;
background-color: #e6f4ff;
padding: 20px;
border-radius: 5px;
/*margin: 10px; à remplacer par gap */
transition: box-shadow 0.3s ease, transform 0.3s ease;
color: #000;
text-decoration: none;
}
.reset-zone-garderies .lien-texte{
color: #007bff;
text-decoration: underline;
}
.reset-zone-garderies .lien-texte:hover{
color: #709bff;
}

.reset-zone-garderies .card img {
grid-area: image;
width: 100%;

object-fit: cover;
border-radius: 5px 5px 0 0;
margin-bottom: 10px;
margin-right: 10px;
}

.reset-zone-garderies .card h3 {
grid-area: titre;
margin-top: 0;
}

.reset-zone-garderies .card p {
grid-area: texte;
}

.reset-zone-garderies .card a {
grid-area: lien;
display: inline-block;
margin-top: 10px;
text-decoration: none;
color: #007bff;
}

.reset-zone-garderies table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}

.reset-zone-garderies caption {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 10px;

}

.reset-zone-garderies th, .reset-zone-garderies td {
padding: 8px;
text-align: center;

}

.reset-zone-garderies th {
background-color: #2c3c85;
color: white;
}

.reset-zone-garderies tr:nth-child(even) {
background-color: #c8e2f6;

}

.reset-zone-garderies tr:nth-child(odd) {
background-color: #b9defa; 
}



/*Accueil*/
.reset-zone-garderies .card-accueil {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 10px;
}

.reset-zone-garderies .mobil-defil {
scroll-snap-type: x mandatory; /* Définit le type de défilement snap sur l'axe horizontal */
overflow-x: scroll; /* Active le défilement horizontal */
width: 100%; /* Largeur de la zone de défilement */
}
.reset-zone-garderies .mobil-defil .card{ 
scroll-snap-align: start; /* Aligne chaque élément de défilement avec le début de la zone d'ancrage la plus proche */
width: 75vw; /* Largeur de chaque élément de défilement */
display: inline-block; /* Affiche les éléments de défilement en ligne */

}






@media (min-width: 992px) {
.reset-zone-garderies .sidenav {
display: none;

}
.reset-zone-garderies #openBtn{
display: none;
}


.reset-zone-garderies .mobil-defil {
scroll-snap-type: x mandatory; 
overflow-x: auto; 
width: 100%; 
}
.reset-zone-garderies .mobil-defil .card{ 
scroll-snap-align: unset; 
width: auto; 
display: block; 

}


.reset-zone-garderies .blog-texte-et-card {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
}

.reset-zone-garderies .card-desktop-article {
grid-column: 2;
}


.reset-zone-garderies .container-garderie-accueil {
display: grid;
grid-template-columns: 1fr 1fr; 

}
.reset-zone-garderies .articles-texte {

grid-column: 1;
}

.reset-zone-garderies .section-banniere-mobil {
display: none;
}

.reset-zone-garderies .formulaire-section {
grid-template-columns: repeat(2, 1fr);
grid-auto-flow: column;
}

.reset-zone-garderies .back-impair {
display: flex;
flex-direction: row;
gap: 2rem;
}

.reset-zone-garderies .back-pair {
display: flex;
flex-direction: row-reverse;
gap: 2rem;
}

.reset-zone-garderies .card-blog {
grid-template-columns: repeat(3, 1fr);
}

.reset-zone-garderies .card {
display: block;
background-color: #e6f4ff;
padding: 20px;
border-radius: 5px;
margin: 10px;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.reset-zone-garderies .card img {
width: 100%;
border-radius: 5px 5px 0 0;
margin-bottom: 10px;
}

.reset-zone-garderies .card h3 {
margin-top: 0;
}

.reset-zone-garderies .card a {
display: inline-block;
margin-top: 10px;
text-decoration: none;
color: #007bff;
}

.reset-zone-garderies .card a:hover {
text-decoration: underline;
}

.reset-zone-garderies .card:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transform: translate(-4px);
}

.reset-zone-garderies footer .adresse {
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"infoadress  carte-club ";
}
}


@media (max-width: 992px) {



.reset-zone-garderies .menu-top li {
display: none;
}

.reset-zone-garderies .section-banniere-desktop {
display: none;
}

.reset-zone-garderies .titre-articles-blog {
grid-column: 1 / span 2;
}

.reset-zone-garderies .articles-texte {
padding-right: 30px;

}

.reset-zone-garderies .image-intro {
display: none;
}

.reset-zone-garderies .intro-garderie {
grid-template-columns: repeat(1, 1fr);
}

.reset-zone-garderies .card-desktop-article {
display: none;

}
.reset-zone-garderies .container-garderie-accueil img {
display: none;
}

}

@media (min-width: 560px) {
.reset-zone-garderies .form-garderie {
grid-template-columns: repeat(2, 1fr);
}
}

/* ==========================================================================
Helper classes
========================================================================== */

/*
* Hide visually and from screen readers
*/

.reset-zone-garderies .hidden{
display: none !important;
}

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

.reset-zone-garderies .visually-hidden {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
/* 1 */
}

/*
* Extends the .visually-hidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

.reset-zone-garderies .visually-hidden.focusable:active,
.reset-zone-garderies .visually-hidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
white-space: inherit;
width: auto;
}

/*
* Hide visually and from screen readers, but maintain layout
*/

.reset-zone-garderies .invisible {
visibility: hidden;
}

/*
* Clearfix: contain floats
*
* The use of `table` rather than `block` is only necessary if using
* `::before` to contain the top-margins of child elements.
*/

.reset-zone-garderies .clearfix::before,
.reset-zone-garderies .clearfix::after {
content: "";
display: table;
}

.reset-zone-garderies .clearfix::after {
clear: both;
}

/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */

@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}

@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}


/*
@media print {

*,
*::before,
*::after {
background: #fff !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}*/

.reset-zone-garderies a,
.reset-zone-garderies a:visited {
text-decoration: underline;
}
/*
.reset-zone-garderies a[href]::after {
content: " (" attr(href) ")";
}
*/
.reset-zone-garderies abbr[title]::after {
content: " (" attr(title) ")";
}
}

/*
* Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol
*/
.reset-zone-garderies a[href^="#"]::after,
.reset-zone-garderies a[href^="javascript:"]::after {
content: "";
}

.reset-zone-garderies pre {
white-space: pre-wrap !important;
}

.reset-zone-garderies pre,
.reset-zone-garderies blockquote {
page-break-inside: avoid;
}

.reset-zone-garderies tr,
.reset-zone-garderies img {
page-break-inside: avoid;
}

.reset-zone-garderies p,
.reset-zone-garderies h2,
.reset-zone-garderies h3 {
orphans: 3;
widows: 3;
}

.reset-zone-garderies h2,
.reset-zone-garderies h3 {
page-break-after: avoid;
}

.reset-zone-garderies {
padding: 10px
}
.reset-zone-garderies img{
max-width: 100%;
}


.reset-zone-garderies .tx-intro{
    margin-bottom: 20px;

}