@import url("base.css");
@import url("variables.css");
@import url("icons.css");
@import url("block-title.css");
@import url("pages-transverses.css");

:host {
  display: flex;
  flex: 1;
}

body {
  background: linear-gradient(88.3deg,#f0f1ff 2.89%,#f0f4ff 65.71%,#f3f5ff 97.11%);
}

.sc-template__main-zone {
  flex: 1;
  padding: var(--template-padding-top) var(--template-padding-lateral)
  var(--template-padding-bottom) var(--template-padding-lateral);
  position: relative;
}

@media screen and (max-width:860px) {

  .sc-template__main-zone {
    padding: var(--template-padding-top--md) var(--template-padding-lateral--md)
    var(--template-padding-bottom) var(--template-padding-lateral--md);
  }

  .sc-template__main-zone {
    padding-top: 0;
  }
}
  
.sc-template-content {
  flex: 1;
  display: grid;
  grid-template-columns: var(--size-zone-fix) 1fr;
  gap: var(--template-gutter);
  padding:  0 44px 0 44px; /* (88px/2) représente le menu à gauche dans les apps réparti pour resté centré */
}

.sc-template-content.--fullMode {
  grid-template-columns: 1fr;
}
  
.sc-template-content__grid-zone {
  padding-left: 0;
  padding-right: 0;
}

/*  screen-size--sm */  
@media screen and (max-width: 680px) {
  .sc-template-content {
    display: flex;
    flex-direction: column;
  }
}

.container {
  box-sizing: border-box;
}

.o-card {
  /*__card-style__*/
    border-radius: var(--radius-card);
    background-color: var(--bg-card--primary);

    /*__border__*/
      border-width: var(--border-size-default);
      border-style: var(--border-type-default);
      border-color: var(--bg-card--primary);
    /*--------------*/

    /*__box-shadow__*/
      -webkit-box-shadow: var(--shad-card--light);
      -moz-box-shadow: var(--shad-card--light);
      box-shadow: var(--shad-card--light);
    /*--------------*/
  /*--------------*/
}

.o-section--head {
  padding: var(--padding-section--top-bottom) var(--padding-section--left-right)
  var(--padding-section--inter) var(--padding-section--left-right);
}

.o-section--foot {
  padding: var(--padding-section--inter) var(--padding-section--left-right)
  var(--padding-section--top-bottom) var(--padding-section--left-right);
}

.row-group {
  display: flex;
  flex-direction: column;
}

.row,
.row-group {
  row-gap: var(--row-spacing--input);
}

.row.center {
  justify-content: center;
}