/* ==========================
   PAGE GARDE
========================== */

.garde-page{
  /* ==========================================
     THÈME GARDE
     Modifie uniquement ces deux couleurs
  ========================================== */
  --garde-main:#6549c7;
  --garde-light:#f2ecff;

  font-family:'Inter', Arial, sans-serif;
  color:#0b2d3a;
  background:#fff;
}

/* ==========================
   GRILLE PRINCIPALE
========================== */

.garde-page .hours-main-card{
  display:grid;
  grid-template-columns:minmax(0, 1.7fr) minmax(360px, .8fr);
  gap:28px;
  align-items:start;
  margin-top:35px;
}

.garde-left{
  background:#fff;
  border-radius:18px;
  padding:0;
  overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,.08);
}

.garde-page .hours-info-card{
  background:#fff;
  border-radius:18px;
  padding:35px;
  box-shadow:0 8px 28px rgba(0,0,0,.08);
}

/* ==========================
   TITRE
========================== */

.garde-title{
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:35px;
}

.garde-title h2{
  margin:0;
  font-size:32px;
}

.garde-title p{
  margin:6px 0 0;
  color:#687985;
}

/* ==========================
   CALENDRIER
========================== */

.calendar-card{
  border:1px solid #edf1f2;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
}

.calendar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 24px;
  border-bottom:1px solid #edf1f2;
}

.calendar-header h3{
  margin:0;
  font-size:20px;
}

.calendar-header button{
  width:42px;
  height:42px;

  border:none;
  border-radius:50%;

  background:var(--garde-light);
  color:var(--garde-main);

  cursor:pointer;
  font-size:16px;

  transition:all .25s ease;
}

.calendar-header button:hover{
  background:var(--garde-main);
  color:#fff;
}

.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:10px;
  padding:24px;
  text-align:center;
}

.calendar-grid div{
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  border-radius:50%;
}

.calendar-grid div:nth-child(-n+7){
  color:#687985;
  font-size:14px;
  font-weight:700;
  border-radius:0;
}

.garde-day{
  background:var(--garde-main);
  color:#fff;
  box-shadow:0 10px 22px rgba(101,73,199,.22);
}

/* ==========================
   NOTE GARDE
========================== */

.garde-note-card{
  margin-top:20px;
  background:#fff;
  border-radius:18px;
  padding:28px;
  display:flex;
  gap:20px;
  align-items:flex-start;
  box-shadow:0 8px 28px rgba(0,0,0,.08);
}

.garde-note-icon{
  width:50px;
  height:50px;
  flex-shrink:0;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;
  background:var(--garde-light);

  color:var(--garde-main);
  font-size:22px;
}

.garde-note-content p{
  margin:0 0 16px;
  line-height:1.7;
  color:#42566d;
}

.garde-note-content p:last-child{
  margin-bottom:0;
}

/* ==========================================================
   ITINERAIRE
========================================================== */

.hours-right{
    display:flex;
    flex-direction:column;
    gap:28px;
}

.hours-right .contact-map-card{
    width:100%;
    margin:0;
}

.hours-right .contact-card{
    max-width:none;
}

/* ==========================
   PAGE GARDE - INFORMATIONS UTILES
========================== */

.garde-page .hours-info-card h2 i{
  color:var(--garde-main);
}

.garde-page .hours-info-item > div:first-child{
  background:var(--garde-light);
}

.garde-page .hours-info-item > div:first-child i{
  color:var(--garde-main);
}

/* ==========================
   PAGE GARDE - CARTE ITINÉRAIRE
========================== */

.garde-page .itineraire-icon{
  background:var(--garde-light);
}

.garde-page .itineraire-icon i,
.garde-page .itineraire-header h3{
  color:var(--garde-main);
}

.garde-page .itineraire-divider{
  background:var(--garde-light);
}

.garde-page .itineraire-arrow{
  background:#fff;
  border:3px solid var(--garde-main);
}

.garde-page .itineraire-arrow i{
  color:var(--garde-main);
}

.garde-page .itineraire-arrow:hover,
.garde-page .itineraire-card:hover .itineraire-arrow{
  background:var(--garde-main);
  border-color:var(--garde-main);
  transform:scale(1.05);
}

.garde-page .itineraire-arrow:hover i,
.garde-page .itineraire-card:hover .itineraire-arrow i{
  color:#fff;
}

/* ==========================
   PAGE GARDE - NOTE D'INFORMATION
========================== */

.garde-page .garde-note-icon{
  background:var(--garde-light);
  color:var(--garde-main);
}

.garde-page .garde-note-icon i{
  color:var(--garde-main);
}

/* ==========================
   PAGE GARDE - HERO
========================== */

/* Fil d'Ariane */

.garde-page .privacy-breadcrumb,
.garde-page .privacy-breadcrumb a,
.garde-page .privacy-breadcrumb span{
  color:var(--garde-main);
}

/* Trait sous le titre */

.garde-page .underline{
  background:var(--garde-main);
}

/* Texte du hero en blanc */

.garde-page .garde-hero h1,
.garde-page .garde-hero .hero-content > p{
  color:#fff;
}

/* ==========================
   RESPONSIVE
========================== */

@media(max-width:1050px){
  .garde-page .hours-main-card{
    grid-template-columns:1fr;
  }
}

@media(max-width:700px){
  .garde-title{
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:14px;
    text-align:left;
    margin-bottom:28px;
  }

  .garde-title .hours-icon{
    flex-shrink:0;
  }

  .garde-title .hours-divider{
    flex-shrink:0;
    margin:0;
  }

  .garde-title h2{
    font-size:22px;
    line-height:1.2;
    white-space:nowrap;
  }

  .calendar-grid{
    gap:6px;
    padding:18px;
  }

  .calendar-grid div{
    min-height:38px;
    font-size:14px;
  }

  .garde-note-card{
    flex-direction:column;
}

.garde-note-icon{
    margin:auto;
}
}