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

.garde-page{
  /* ==========================================
     THÈME GARDE
     Modifie uniquement ces deux couleurs
  ========================================== */
  --garde-main:#394B9A;
  --garde-light:#EEF0FA;

  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 #E5E8F5;
  border-radius:18px;
  overflow:hidden;
  background:#F8F9FD;
}

.calendar-header{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 42px 42px;
  grid-template-areas:"title previous next";
  align-items:center;
  gap:8px;

  padding:14px 16px;
  border:0;
  border-radius:0;

  background:transparent;
}

.calendar-header h3{
  grid-area:title;

  min-width:0;
  margin:0;

  color:#27325F;
  font-family:"Roboto", sans-serif;
  font-size:1rem;
  font-weight:800;
  line-height:1.2;
  text-align:left;
  white-space:nowrap;
}

.calendar-header .full-calendar-prev{
  grid-area:previous;
}

.calendar-header .full-calendar-next{
  grid-area:next;
}

.calendar-header button{
  display:flex;
  align-items:center;
  justify-content:center;

  width:42px;
  height:42px;
  padding:0;

  border:1px solid #DDE1F3;
  border-radius:50%;

  background:#fff;
  color:var(--garde-main);

  cursor:pointer;
  font-size:.9rem;

  transition:
    background .25s ease,
    border-color .25s ease,
    color .25s ease,
    transform .25s ease;
}

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

.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:8px;
  padding:18px 20px 20px;

  border:0;
  border-radius:0;

  background:transparent;
  text-align:center;
}

.calendar-grid div{
  display:flex;
  align-items:center;
  justify-content:center;

  min-width:0;
  min-height:44px;

  border:1px solid #E5E8F5;
  border-radius:12px;

  background:#fffefd;
  color:#4A536E;

  font-family:"Roboto", sans-serif;
  font-size:.92rem;
  font-weight:700;

  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

.calendar-grid .calendar-day:not(.garde-day):hover{
  transform:translateY(-1px);
  border-color:#C9D0EC;
  background:#fff;
  box-shadow:0 5px 12px rgba(57,75,154,.08);
}

.calendar-grid .calendar-day.is-today:not(.garde-day){
  border:2px solid var(--garde-main);
  color:var(--garde-main);
  box-shadow:0 0 0 3px rgba(57,75,154,.08);
}

.calendar-grid div:nth-child(-n+7){
  min-height:30px;

  border:0;
  border-radius:8px;

  background:transparent;
  color:#7C849B;

  font-size:.72rem;
  font-weight:800;
}

.calendar-grid .calendar-empty{
  border-color:transparent;
  background:transparent;
  box-shadow:none;
}

.garde-day{
  border-color:transparent;
  border-radius:12px;

  background:
    linear-gradient(
      135deg,
      #394B9A,
      #4B5EB0
    );

  color:#fff;

  box-shadow:
    0 6px 16px rgba(57,75,154,.24);

  cursor:pointer;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    filter .25s ease;
}

.garde-day:hover{
  transform:translateY(-2px);
  box-shadow:
    0 10px 22px rgba(57,75,154,.28);
  filter:brightness(1.03);
}

.garde-day.garde-external{
  background:
    linear-gradient(
      135deg,
      #5E70BF,
      #7485CC
    );

  box-shadow:
    0 6px 16px rgba(94,112,191,.24);
}

.garde-day.garde-external:hover{
  box-shadow:
    0 10px 22px rgba(94,112,191,.28);
}

/* ==========================
   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
   Couleurs globales vert/turquoise conservées comme dans le popup du menu
========================== */

/* ==========================
   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:minmax(0, 1fr);
    width:100%;
    max-width:100%;
    min-width:0;
  }

  /* Empêche le calendrier de conserver une largeur minimale
     et de dépasser à droite lorsque l’écran rétrécit. */
  .garde-page .garde-left,
  .garde-page .hours-info-card,
  .garde-page .calendar-card,
  .garde-page .garde-note-card{
    width:100%;
    max-width:100%;
    min-width:0;
    margin-left:auto;
    margin-right:auto;
    box-sizing:border-box;
  }
}

@media(max-width:700px){
  /* Centre parfaitement tout le contenu de la carte sur mobile */
  .garde-page .hours-info-card{
    width:100%;
    max-width:100%;
    margin-inline:auto;
    padding-left:14px;
    padding-right:14px;
    box-sizing:border-box;
  }

  .garde-page .calendar-card,
  .garde-page .garde-note-card{
    width:100%;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    box-sizing:border-box;
  }

  .calendar-header{
    grid-template-columns:minmax(0, 1fr) 38px 38px;
    gap:6px;
    padding:10px 8px;
  }

  .calendar-header button{
    width:38px;
    height:38px;
  }

  .calendar-header h3{
    font-size:.92rem;
  }

  .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:4px;
    padding:10px 8px 12px;
  }

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

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

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

/* ==========================================================
   HERO JOUR DE GARDE — HAUTEUR COMMUNE VALIDÉE
   ========================================================== */

.garde-page .garde-hero {
  min-height: 60vh;
}

.garde-page .garde-hero .hero-content {
  height: 60vh;
}

@media screen and (max-width: 900px) {
  .garde-page .garde-hero {
    min-height: 62vh;
  }

  .garde-page .garde-hero .hero-content {
    height: 62vh;
  }
}

/* ==========================================================
   FIL D'ARIANE — FOND BLANC ARRONDI
   Garde la couleur bleue/violette de la page Jour de garde
   ========================================================== */

.garde-page .garde-hero .privacy-breadcrumb {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 12px;

  padding: 11px 20px;

  background: rgba(255, 255, 255, .96);
  border-radius: 45px;

  box-shadow: 0 6px 20px rgba(4, 31, 45, .10);
}

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

.garde-page .garde-hero .privacy-breadcrumb a {
  text-decoration: none;
}

@media screen and (max-width: 700px) {
  .garde-page .garde-hero .privacy-breadcrumb {
    gap: 9px;
    padding: 9px 16px;
    border-radius: 45px;
  }
}