/* ============================
   AVALANCHE - BASE
   ============================ */
:root{
  --av-max: 1000px;
  --av-sidebar: 260px;
  --av-pad: 2rem;
  --av-gap: 1.5rem;

  --btn-text: #3a3a3a;
  --btn-text-hover: #222;
  --btn-grad: linear-gradient(to bottom, #cfe4ff 0%, #8cb8ff 100%);
  --btn-grad-hover: linear-gradient(to bottom, #d9ecff 0%, #7fb0ff 100%);
  --btn-grad-active: linear-gradient(to bottom, #9fb8ff 0%, #2b4cff 100%);
  --btn-icon-grad: linear-gradient(to bottom, #e8f3ff 0%, #8fb7ff 100%);
  --btn-icon-grad-active: linear-gradient(to bottom, #eaf1ff 0%, #6e93ff 100%);
  --btn-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(0,0,0,.15);
  --btn-icon: url("/images/avalanche/menuicon.png");
}

/* Fond neige + typo globale */
body{
  color:#333;
  line-height:1.5;
  background: url("/images/avalanche/flocons.jpg") repeat;
  margin:0;
  font-size:14px;
  font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
  text-align:justify;
}

/* ============================
   LAYOUT (grille Cassiopeia)
   ============================ */

/* Centre et limite le "contenu" (header + grid) sans toucher aux .grid-child */
.grid-child.container-nav {
  width: var(--av-max);
  margin-left:auto;
  margin-right:auto;
  padding-top: 5px;
  padding-bottom: 5px;
  background: #227f8f;
}

.avalanche-countdown {
    font-size: 1.2rem;
	font-weight: bolder;
    text-align: center !important;
    padding: 1rem;
	color: white;
	width: 100%
}

.customcodemod-avalanche-countdown {
    width: 100%;
}

.site-grid {
  width: var(--av-max);
  margin-left:auto;
  margin-right:auto;
  padding:0;
}

.container-header,
.container-header .inner,
.container-header .container {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Grille 2 colonnes */
.site-grid {
  display:grid;
  grid-template-columns: var(--av-sidebar) 1fr;
  grid-template-areas: "sidebar main";
  gap:0;                 /* pas d'espace parasite */
  align-items:stretch;   /* colonnes même hauteur */
  background:#fff;       /* évite la "ligne" (fuite du background) */
}

/* Placement zones */
.site-grid > .container-sidebar-left-avalanche{ grid-area: sidebar; }
.site-grid > .container-component{ grid-area: main; }

/* Neutraliser le centrage/marges/padding sur les enfants directs */
.site-grid > .grid-child{
  margin:0 !important;
  padding:0 !important;
}

/* Colonne gauche (empile modules verticalement) */
.site-grid > .container-sidebar-left-avalanche{
  display:flex;
  flex-direction:column;
  gap: var(--av-gap);
  background:#fff;
  padding: var(--av-pad);
  box-sizing:border-box;
}

/* Colonne droite */
.site-grid > .container-component{
  background:#fff;
  padding: var(--av-pad);
  box-sizing:border-box;
}

/* Enlever bordures/ombres Bootstrap "card" dans la sidebar */
.container-sidebar-left-avalanche .card{
  border:0 !important;
  box-shadow:none !important;
  background: transparent;
}

/* ============================
   ARTICLE (moins d'espace en haut)
   ============================ */
.container-component main{ padding-top:0; }
.container-component .page-header{ margin-top:0; padding-top:0; }
.container-component .page-header h1{ margin-top:0; }
.container-component .com-content-article .article-info{ margin-top:.25rem; }

/* Optionnel: tes marges actuelles (si tu les veux vraiment) */
.com-content-article.item-page{
  padding-top:50px;
  padding-right:50px;
}

/* Optionnel: pousser le 1er module plus bas */
.sidebar-left-avalanche.card{
  padding-top:50px;
  padding-right:30px;
}

/* ============================
   BOUTONS (Menu + Langues)
   ============================ */

/* Listes (menu et langues) */
.avalanche-menu ul.mod-menu,
.avalanche-menu .mod-languages__list{
  list-style:none;
  margin:0;
  padding:0;
}

/* Li */
.avalanche-menu ul.mod-menu > li,
.avalanche-menu .mod-languages__list > li{
  margin:0 0 14px 0;
}

/* Liens (boutons) */
.avalanche-menu ul.mod-menu > li > a,
.avalanche-menu .mod-languages__list > li > a{
  display:flex;
  align-items:center;
  width:100%;
  min-height:46px;
  padding:10px 16px 10px 14px;
  background: var(--btn-grad);
  color: var(--btn-text);
  font-weight:600;
  text-decoration:none;
  text-align:left;
  box-shadow: var(--btn-shadow);
}

/* Icône avant le texte (menu + langues) */
.avalanche-menu ul.mod-menu > li > a::before,
.avalanche-menu .mod-languages__list > li > a::before{
  content:"";
  width:28px;
  height:28px;
  margin-right:12px;
  flex:0 0 28px;
  background-image: var(--btn-icon), var(--btn-icon-grad);
  background-repeat:no-repeat, no-repeat;
  background-position:center, center;
  background-size:18px 18px, cover;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}

/* Hover */
.avalanche-menu ul.mod-menu > li > a:hover,
.avalanche-menu .mod-languages__list > li > a:hover{
  background: var(--btn-grad-hover);
  color: var(--btn-text-hover);
}

/* Actif (menu) */
.avalanche-menu ul.mod-menu > li.current > a{
  background: var(--btn-grad-active);
  color:#fff;
}

.avalanche-menu ul.mod-menu > li.current > a::before{
  background-image: var(--btn-icon), var(--btn-icon-grad-active);
}

/* Aligner le header sur la même largeur que le contenu */
.header.container-header.full-width .container-below-top-avalanche{
  width: var(--av-max);   /* 1000px */
  margin: 0 auto;             /* centré */
  padding: 0;
}

/* Centrer l'image à l'intérieur */
.header.container-header.full-width .navbar-brand{
  display: flex;
  justify-content: center;
}

/* Image responsive (sans dépasser la largeur du site) */
.header.container-header.full-width .brand-logo img{
  display: block;
  max-width: 100%;
  height: auto;
}


.avalanche-menu .mod-languages__list.lang-inline > li{
  display: block !important;
  width: 100% !important;
}