body {
  background-color: #CBD5E1;
    padding-top: 50px;
    padding-bottom: 60px;
}

/* css personnalisée pour la barre de navigation */
.navbar-couleurfond {
  background-color: #64748B;/* couleur du fond Navbar */
}
.navbar-titre {
  font-weight: normal;
  font-size: 1.25rem;
  color: #CBD5E1 /* couleur du titre Navbar */
}


/* ==========================
   Boutons spécifiques
   ========================== */

/* Clair */
.btn-menuclair {
  height: 30px;
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;

  --btn-color: #ffffff;
  --btn-bg: #94A3B8;
  --btn-color-hover: #E2E8F0;
  --btn-bg-hover: #64748B;
  --btn-color-active: #ffffff;
  --btn-bg-active: #94A3B8;
}

/* Foncé */
.btn-menufonce {
  height: 30px;
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;

  --btn-color: #64748B;
  --btn-bg: #E2E8F0;
  --btn-color-hover: #E2E8F0;
  --btn-bg-hover: #64748B;
  --btn-color-active: #64748B;
  --btn-bg-active: #E2E8F0;
}

.card-columns {
  @include media-breakpoint-only(md) {
    column-count: 2;
  }
}


/* css textes standard pour l'ensemble du site */
.texte-standartjustify {
  font-size: 1em;
  text-align: justify;
  font-weight: normal;
  color: #5a687d !important; 
  line-height: 1.3; /* 1.4 = 140% de la hauteur de la ligne */
}
.texte-standartgauche {
  font-size: 1em;
  text-align: left;
  color: #5a687d !important;
  line-height: 1.3; /* 1.4 = 140% de la hauteur de la ligne */ 
}
.texte-justifie {
  text-align: justify;
  text-justify: inter-word;
}
.soustitre-contenu {
  font-size: 1.3em;
  text-align: left;
  color: #64748B; 
  font-weight: bold;
  line-height: 1.3; /* 1.4 = 140% de la hauteur de la ligne */
}
.soustitre-contenusmall {
  font-size: 1em;
  text-align: left;
  color: #64748B !important; 
  font-weight: bold;
  line-height: 1.3; /* 1.4 = 140% de la hauteur de la ligne */
}
.soustitre-contenusmallblanc {
  font-size: 1em;
  text-align: left;
  color: #ffffff !important; 
  font-weight: 600;
  line-height: 1.3; /* 1.4 = 140% de la hauteur de la ligne */
}
.soustitre-formulaireinscription {
  font-size: 1.1em;
  text-align: left;
  color: #64748B; 
  font-weight: bold;
  line-height: 1.1; /* 1.4 = 140% de la hauteur de la ligne */
}
.small-text {
  font-size: 1rem !important;
}
.w-90 {
  width: 90% !important;
}
.textepetit-couleursite {
  font-size: 0.9em !important;
  color: #5a687d !important;
  font-weight: normal;
}
.textepetit-couleurclair {
  font-size: 0.9em !important;
  color: #ffffff !important;
  font-weight: normal;
}
.textepetit-couleurclairgras {
  font-size: 0.9em !important;
  color: #ffffff !important;
  font-weight: bold;
}
.textepetitgras-couleursite {
  font-size: 0.9em !important;
  color: #5a687d !important;
  font-weight: bold;
}

/* Taille des icons dans le pied de page */
.footer i {
  font-size: 1.2rem;
  transition: transform 0.3s ease, color 0.3s ease;
}
.footer a:hover i {
  transform: scale(1.3);
  color: #ffffff; /* ou une couleur personnalisée */
}


/* Effet au survol des liens dans le pied de page */
.footer a {
  transition: transform 0.3s ease, color 0.3s ease;
}
.footer a:hover {
  transform: scale(1.1);
  color: #ffffff !important; /* couleur de survol */
}


/* css accordion pages projet educatif/infos administraves/infos pratiques */
/* Titres des sections */
.accordion-button {
  background-color: #98a3b6;
  color: #ffffff;
  padding-top: 0.6rem;   /* par défaut Bootstrap met 1rem */
  padding-bottom: 0.6rem;
  line-height: 1.2;      /* réduit l’espacement vertical du texte */
  min-height: 2.5rem;    /* tu peux imposer une hauteur mini si besoin */
}
/* Titre actif (ouvert) */
.accordion-button:not(.collapsed) {
  background-color: #64748b;
  color: #ffffff;
}
/* Corps des contenus */
.accordion-body {
  background-color: #ffffff;
  color: #5a687d;
}
.soustitre-contenuaccordion {
  font-size: 1.1em;
  text-align: left;
  color: #64748B; 
  font-weight: bold;
  line-height: 1.2; /* 1.4 = 140% de la hauteur de la ligne */
}
.soustitre-contenuaccordionblanc {
  font-size: 1.1em;
  text-align: left;
  color: #98a3b6; 
  font-weight: bold;
  line-height: 1.2; /* 1.4 = 140% de la hauteur de la ligne */
}
/* Séparateur fin entre titres */
.accordion-item .accordion-button {
  border: 0;
  border-top: 1px solid rgba(32, 86, 65, 0.15); /* vert #205641 très léger */
}


/* carroussel page lecentredevacances.php */
.img-contain {
  object-fit: contain;  /* affiche toute l'image sans couper */
  height: auto;
}

.carousel-item {
  background-color: transparent; /* fond invisible */
}


/* css cartes engagement de la page quinoussommes.php */
.animate-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-in-out;
}
.animate-fade.appear {
  opacity: 1;
  transform: translateY(0);
}
.card-engagement {
  min-height: 80px;
  background-color: #EEEFE0;
  color: #205641;
}


/* Mot du directeur de la page quinoussommes.php */
.mot-directeur {
  font-family: 'Caveat', cursive;
  font-size: 1.8rem;
  text-align: center;
  color: #4b2e2e;
  margin-top: 0.8rem;
  line-height: 1.1; /* <--- Espacement réduit entre les lignes */
}

.signature-directeur {
  font-family: 'Caveat', cursive;
  font-size: 1.5rem;
  color: #4b2e2e; /* bordeaux foncé, harmonieux */
  text-align: right;
  margin-top: 1rem;
  margin-right: 1rem;
}


/* Texte autour d'une image */
.wrap-img {
  height: auto;
  border-radius: 0; /* pas d’arrondi */
  box-shadow: none; /* ombre plus discrète */
  float: right;
  margin: 0 0 0.5rem 1rem; /* marge plus petite en bas */
  max-width: 40%; /* par défaut sur écran large */
}

/* Tablettes */
@media (max-width: 992px) {
  .wrap-img {
    max-width: 50%;
  }
}

/* Mobiles */
@media (max-width: 768px) {
  .wrap-img {
    float: none;       /* enlève l’habillage sur petit écran */
    display: block;
    margin: 0 auto 0.75rem auto;
    max-width: 100%;
  }
}


/* Dérouler correctement les accordion sur mobile */
:root { --nav-height: 64px; } /* adapte à ta navbar (56–80px) */

@media (max-width: 991.98px) { /* mobile/tablette */
  .accordion .accordion-collapse {
    scroll-margin-top: calc(var(--nav-height) + 8px);
  }
}

/* Optionnel : pour un scroll doux partout */
html { scroll-behavior: smooth; }


/* Dimension des icon soumis a cette class */
.icon-lg {
  font-size: 1.4rem; /* Agrandit uniquement ce qui a .icon-lg */
}


/* =================================
   Classe utilitaire commune BOUTONS
   ================================= */
.btn-relief {
  color: var(--btn-color, inherit);
  background-color: var(--btn-bg, transparent);

  border: none;
  border-radius: 5px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;

  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease,
    color 0.1s ease,
    background-color 0.1s ease;
}

/* État normal (utile si lien <a>) */
.btn-relief,
.btn-relief:link,
.btn-relief:visited {
  color: var(--btn-color, inherit);
  background-color: var(--btn-bg, transparent);
  text-decoration: none;
}

/* Survol */
.btn-relief:hover {
  color: var(--btn-color-hover, var(--btn-color, inherit));
  background-color: var(--btn-bg-hover, var(--btn-bg, transparent));
  transform: translateY(-1px);
  box-shadow: 0 3px 5px rgba(0,0,0,0.15);
}

/* Clic / focus */
.btn-relief:active,
.btn-relief:focus,
.btn-relief:active:focus {
  color: var(--btn-color-active, var(--btn-color-hover, var(--btn-color, inherit)));
  background-color: var(--btn-bg-active, var(--btn-bg-hover, var(--btn-bg, transparent)));
  transform: translateY(1px);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
  outline: none;
}


/* Intérieur accordéon */
.btn-interieuraccordion {
  height: 36px;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;

  --btn-color: #819A91;
  --btn-bg: #e3e4d1;
  --btn-color-hover: #FBF0E9;
  --btn-bg-hover: #819A91;
  --btn-color-active: #FBF0E9;
  --btn-bg-active: #819A91;
}


/* Debloquer la colonne de gauche (filtres) de la page cataloguedessejours.php taille telephone */
@media (max-width: 991.98px) {
  .disable-sticky-mobile {
    position: static !important; /* revient au comportement normal */
    top: auto !important;
  }
}

/* fond des listes déroulantes page cataloguedessejours.php */
.fond-listesderoulantecatalogue {
  background-color: #ffffff; 
  color: #5a687d;
}

/* Agrandir uniquement les checkboxes */
#filters-form input[type="checkbox"] {
  width: 1.4em;
  height: 1.4em;
  accent-color: #205641; /* vert foncé quand coché */
}

#filters-form .form-check {
  display: flex;
  align-items: center;          /* case + texte bien alignés verticalement */
  justify-content: flex-start;  /* colle tout à gauche */
}

#filters-form .form-check-input {
  margin-right: 0.5rem;         /* espace entre case et texte */
}

#filters-form .form-check-label {
  margin: 0;                    /* supprime marges parasites */
  text-align: left;             /* texte bien à gauche */
}


/* carte du moteur de recherche */
.card-formulaire {
  background-color: #e3e8ef;
  color: #98a3b6;
  border: 2px solid #ffffff ;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25); !important;         /* ombre */
}

.card-administration {
  background-color: #e3e8ef;
  color: #98a3b6;
  border: 1px solid #ffffff ;
  }

/* carte sejours cataloguedessejours.php */
.card-sejourscatalogue {
  background-color: #fefefe;
  color: #64748B;
  border-radius: 0 !important;         /* angles droits */
  border: 2px solid #ffffff !important; /* fine bordure gris clair Bootstrap */
  box-shadow: 0 4px 10px rgba(0,0,0,0.25); !important;         /* ombre */
}

.card-sejourscataloguetexte {
  font-size: 1em;
  text-align: justify;
  font-weight: normal;
  color: #64748B; 
  line-height: 1.2; /* 1.4 = 140% de la hauteur de la ligne */
}

.card-sejourscataloguedates {
  font-size: 1em;
  text-align: center;
  font-weight: normal;
  color: #64748B; 
  line-height: 1.1; /* 1.4 = 140% de la hauteur de la ligne */
  letter-spacing: -0.5px;
}

.card-sejourscataloguecolonnedroite {
  background-color: #e3e8ef; /* couleur au choix */
}


/* bouton en savoir plus : cataloguedessejours.php */
.btn-en-savoir-plus {
  border: 1px solid #64748B;   /* contour */
  color: #64748B;              /* texte  */
  background: transparent;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 4px;
  transition: all 0.2s ease;
  width: 100%;                  /* équivalent à w-75 */
  text-align: center;
  display: inline-block;       /* pour que width s’applique bien */
}

.btn-en-savoir-plus:hover {
  background: #94A3B8;
  color: #fff;
}


/* aggrandir juste un icon */
.big-icon {
  font-size: 1.3rem;  /* augmente la taille */
  line-height: 1;   /* optionnel, pour bien aligner */
}



/* Colonne image en desktop : couvre la hauteur disponible sans gonfler la carte */
.img-col-sejour {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 220px; /* hauteur mini pour éviter une colonne trop fine */
}


/* Bordure verticale raccourcie (ne touche pas haut/bas de la card) */
.border-end-short {
  border-right: 1px solid #dee2e6;
  margin-top: .5rem;    /* espace haut */
  margin-bottom: .5rem; /* espace bas */
}

@media (min-width: 992px){
  /* centre + compaction des liens */
  .navbar-center {
    flex: 1 1 auto;
    min-width: 0;
  }
  .navbar-center .nav {
    flex-wrap: nowrap;
    gap: clamp(0.25rem, 1vw, 0.75rem);
  }
  .navbar-center .nav-link {
    padding-left: .5rem;
    padding-right: .5rem;
    font-size: clamp(.92rem, .7vw + .6rem, 1rem);
    white-space: nowrap;
    color: #e3e8ef !important;     /* couleur de base */
    transition: color .2s ease;    /* petite animation fluide */
  }
  .navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #ffffff !important;     /* couleur au survol */
}
/* Lien désactivé */
.navbar .nav-link.disabled {
  color: #f6d8a2 !important;   /* Couleur texte */
  opacity: 1 !important;
  pointer-events: none;                    /* non cliquable */
  cursor: default;
}
  .navbar-right {
    flex: 0 0 auto;
    margin-left: .5rem;
  }

  /* Séparateurs VERTICAUX (version courte, réglable) */
  .navbar-center .nav-item:not(:last-child) {
    position: relative;      /* nécessaire pour le ::after */
    margin-right: .75rem;
    padding-right: .75rem;
  }
  .navbar-center .nav-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 25%;                /* ↑ baisse pour un trait plus court (ex: 35%) */
    bottom: 25%;             /* ↓ remonte pour un trait plus court */
    right: 0;
    width: 1px;              /* épaisseur du trait */
    background-color: rgba(255,255,255,.5); /* couleur du trait */
  }
}

/* bouton valider formulaire inscription */
.btn-formulaireinscription {
  --bs-btn-bg: #c4dbc4 !important;
  --bs-btn-border-color: #94A3B8;
  --bs-btn-color: #5a687d;

  --bs-btn-hover-bg: #64748B;
  --bs-btn-hover-border-color: #64748B;
  --bs-btn-hover-color: #E2E8F0;

  --bs-btn-active-bg: #94A3B8;
  --bs-btn-active-border-color: #94A3B8;
  --bs-btn-active-color: #ffffff;

  --bs-btn-focus-shadow-rgb: 122,31,43; /* halo focus */
}

/* bouton valider formulaire inscription */
.btn-rougepastel {
  --bs-btn-bg: #e2c6c6;
  --bs-btn-border-color: #94A3B8;
  --bs-btn-color: #5a687d;

  --bs-btn-hover-bg: #64748B;
  --bs-btn-hover-border-color: #64748B;
  --bs-btn-hover-color: #E2E8F0;

  --bs-btn-active-bg: #94A3B8;
  --bs-btn-active-border-color: #94A3B8;
  --bs-btn-active-color: #ffffff;

  --bs-btn-focus-shadow-rgb: 122,31,43; /* halo focus */
}

/* bouton valider formulaire inscription */
.btn-orangepastel {
  --bs-btn-bg: #e4cdae;
  --bs-btn-border-color: #94A3B8;
  --bs-btn-color: #5a687d;

  --bs-btn-hover-bg: #64748B;
  --bs-btn-hover-border-color: #64748B;
  --bs-btn-hover-color: #E2E8F0;

  --bs-btn-active-bg: #94A3B8;
  --bs-btn-active-border-color: #94A3B8;
  --bs-btn-active-color: #ffffff;

  --bs-btn-focus-shadow-rgb: 122,31,43; /* halo focus */
}


  .signature-canvas{
    width:100%;
    height:220px;
    border:1px dashed #ccc;
    border-radius:.5rem;
    background:#fff;
    touch-action: none; /* indispensable sur mobile pour dessiner */
  }

.table.tarifs {
  --bs-table-color: #5a687d;
  --bs-table-striped-color: #5a687d; /* si tu utilises striped */
  --bs-table-hover-color: #5a687d;   /* si tu utilises hover */
}
.table.tarifs tfoot th {
  color: #5a687d !important;
}

/* couleur fond doc page inscription */
.bg-docmanquant {
  background-color: #b4b5b8 !important;
  color: #fff !important;
}
.bg-docaverifier {
  background-color: #e4b683 !important;
  color: #fff !important;
}
.bg-docvalide {
  background-color: #9fba88 !important;
  color: #fff !important;
}
.bg-docrefuse {
  background-color: #CA8787 !important;
  color: #fff !important;
}
.bg-docsiconcerne {
  background-color: #9ab2cd !important;
  color: #fff !important;
}

/* couleur texte */
.texte-jauneverification {
  font-size: 1em;
  text-align: justify;
  font-weight: normal;
  color: #e4b683 !important; 
  line-height: 1.3; /* 1.4 = 140% de la hauteur de la ligne */
}
.texte-vertvalide {
  font-size: 1em;
  text-align: justify;
  font-weight: normal;
  color: #9fba88 !important; 
  line-height: 1.3; /* 1.4 = 140% de la hauteur de la ligne */
}
.texte-grismanquant {
  font-size: 1em;
  text-align: justify;
  font-weight: normal;
  color: #b4b5b8 !important; 
  line-height: 1.3; /* 1.4 = 140% de la hauteur de la ligne */
}
.texte-rougerefuse {
  font-size: 1em;
  text-align: justify;
  font-weight: normal;
  color: #CA8787 !important; 
  line-height: 1.3; /* 1.4 = 140% de la hauteur de la ligne */
}
/* couleur fond */
.bg-docaverifier {
  background-color: #e4b683 !important;
  color: #fff !important;
}
.bg-docvalide {
  background-color: #9fba88 !important;
  color: #fff !important;
}
.bg-docmanquant {
  background-color: #b4b5b8 !important;
  color: #fff !important;
}
.bg-docrefuse {
  background-color: #CA8787 !important;
  color: #fff !important;
}
.bg-entetetableaugris {
  background-color: #919eb4 !important;
}

/*badge remplissage sejour*/
.badge-vert{
  background-color: #afe4b9;
  font-size: 0.7em;
  line-height: 1;
  color: #5a687d;
  font-weight: 600;
  border-radius: 50rem;
  padding: 0.5em 1em;
}
.badge-jaune{
  background-color: #f8fbab;
  font-size: 0.7em;
  line-height: 1; 
  color: #5a687d;
  font-weight: 600;
  border-radius: 50rem;
  padding: 0.5em 1em;
}
.badge-orange{
  background-color: #fec688;
  font-size: 0.7em;
  line-height: 1; 
  color: #5a687d;
  font-weight: 600;
  border-radius: 50rem;
  padding: 0.5em 1em;
}
.badge-rouge{
  background-color: #fd5757;
  font-size: 0.7em;
  line-height: 1;
  color: #e8e8e7;
  font-weight: 600;
  border-radius: 50rem;
  padding: 0.5em 1em;
}