/* Loaded last so it wins over Bootstrap LTR and SmartMenus. */
html[dir="rtl"] .navbar-nav,
html[dir="rtl"] .navbar-nav > li,
html[dir="rtl"] .menu-base-theme > li {
  float: right !important;
}
html[dir="rtl"] .sm,
html[dir="rtl"] .sm ul,
html[dir="rtl"] .sm li {
  direction: rtl !important;
  text-align: right;
}
html[dir="rtl"] .navbar-nav > li > .dropdown-menu,
html[dir="rtl"] .menu-base-theme > li > .dropdown-menu {
  right: 0;
  left: auto;
  text-align: right;
}
html[dir="rtl"] .lien-ar {
  display: inline !important;
}
html[dir="rtl"] .lien-fr {
  display: none !important;
}
html[dir="ltr"] .lien-fr {
  display: inline !important;
}
html[dir="ltr"] .lien-ar {
  display: none !important;
}

/* French: Inscription / Login on the left, languages on the right.
   Arabic: Inscription / Login on the right, languages on the left.
   These beat Bootstrap .pull-left / .pull-right, which swap under RTL. */
html[dir="ltr"] .second-menu .barre-langues,
html[dir="ltr"] .second-menu .col-lg-12 > .pull-right {
  float: right !important;
}
html[dir="ltr"] .second-menu #compte-block {
  float: left !important;
}
html[dir="rtl"] .second-menu .barre-langues,
html[dir="rtl"] .second-menu .col-lg-12 > .pull-right {
  float: left !important;
}
html[dir="rtl"] .second-menu #compte-block {
  float: right !important;
}
/* Same gap between Login and Inscription on every page. */
#compte-block > a + a {
  margin-inline-start: 6px;
}

/* Bootstrap LTR loads after the RTL sheet and pins columns to the left.
   In Arabic the first field of each row belongs on the right.
   Float only inside the same breakpoint Bootstrap uses for that column,
   otherwise a column with no width shrinks and the row spills off to the left. */
html[dir="rtl"] .col-xs-1, html[dir="rtl"] .col-xs-2, html[dir="rtl"] .col-xs-3,
html[dir="rtl"] .col-xs-4, html[dir="rtl"] .col-xs-5, html[dir="rtl"] .col-xs-6,
html[dir="rtl"] .col-xs-7, html[dir="rtl"] .col-xs-8, html[dir="rtl"] .col-xs-9,
html[dir="rtl"] .col-xs-10, html[dir="rtl"] .col-xs-11, html[dir="rtl"] .col-xs-12 {
  float: right !important;
}
@media (min-width: 768px) {
  html[dir="rtl"] .col-sm-1, html[dir="rtl"] .col-sm-2, html[dir="rtl"] .col-sm-3,
  html[dir="rtl"] .col-sm-4, html[dir="rtl"] .col-sm-5, html[dir="rtl"] .col-sm-6,
  html[dir="rtl"] .col-sm-7, html[dir="rtl"] .col-sm-8, html[dir="rtl"] .col-sm-9,
  html[dir="rtl"] .col-sm-10, html[dir="rtl"] .col-sm-11, html[dir="rtl"] .col-sm-12 {
    float: right !important;
  }
}
@media (min-width: 992px) {
  html[dir="rtl"] .col-md-1, html[dir="rtl"] .col-md-2, html[dir="rtl"] .col-md-3,
  html[dir="rtl"] .col-md-4, html[dir="rtl"] .col-md-5, html[dir="rtl"] .col-md-6,
  html[dir="rtl"] .col-md-7, html[dir="rtl"] .col-md-8, html[dir="rtl"] .col-md-9,
  html[dir="rtl"] .col-md-10, html[dir="rtl"] .col-md-11, html[dir="rtl"] .col-md-12 {
    float: right !important;
  }
}
@media (min-width: 1200px) {
  html[dir="rtl"] .col-lg-1, html[dir="rtl"] .col-lg-2, html[dir="rtl"] .col-lg-3,
  html[dir="rtl"] .col-lg-4, html[dir="rtl"] .col-lg-5, html[dir="rtl"] .col-lg-6,
  html[dir="rtl"] .col-lg-7, html[dir="rtl"] .col-lg-8, html[dir="rtl"] .col-lg-9,
  html[dir="rtl"] .col-lg-10, html[dir="rtl"] .col-lg-11, html[dir="rtl"] .col-lg-12 {
    float: right !important;
  }
}
/* Keep every content column inside the menu width. */
html[dir="rtl"] .content_layout > [class*="col-"],
html[dir="rtl"] #wrapper .region-content {
  max-width: 100%;
}
/* Tabs and page numbers start on the right in Arabic. */
html[dir="rtl"] .nav-tabs > li,
html[dir="rtl"] .pagination > li {
  float: right !important;
}
html[dir="rtl"] .pull-right[class*="pagination"] {
  float: right !important;
}
/* Header stays one row below the large breakpoint, so the domain is not pushed out. */
@media (max-width: 1199px) {
  .banner > .row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }
  .banner > .row > [class*="col-"] {
    float: none !important;
    width: auto !important;
  }
  .banner > .row > .col-lg-8 {
    flex: 1 1 auto;
    min-width: 0;
  }
  .banner > .row > .col-lg-2 {
    flex: 0 0 auto;
  }
}
html[dir="rtl"] .pull-left {
  float: right !important;
}
html[dir="rtl"] .pull-right {
  float: left !important;
}
/* A filter button marked pull-right sits beside its field, on the right in Arabic. */
html[dir="rtl"] form .col-md-6 > .form-group > .pull-right {
  float: right !important;
}
/* "كل المبادرات" is marked pull-right: it belongs on the right in Arabic. */
html[dir="rtl"] a.btn.pull-right[href*="liste_petitions"] {
  float: right !important;
}

/* Document-library links follow the site green, not the Bootstrap blue. */
.context-documents .node__content a:not(.btn),
.context-documents .node__content a:not(.btn):visited,
.context-fr-documents .node__content a:not(.btn),
.context-fr-documents .node__content a:not(.btn):visited {
  color: #287900;
}
.context-documents .node__content a:not(.btn):hover,
.context-documents .node__content a:not(.btn):focus,
.context-fr-documents .node__content a:not(.btn):hover,
.context-fr-documents .node__content a:not(.btn):focus {
  color: #1a5000;
}

/* Bootstrap's .badge loads later and paints every status gray.
   Restore the status colors and let long labels wrap inside the card. */
.tab-content-home .badge {
  white-space: normal;
  max-width: 100%;
  height: auto;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  padding: 4px 12px;
  border-radius: 12px;
  margin-top: 6px;
  vertical-align: middle;
}
.tab-content-home .badge.badge-red {
  background-color: #d9534f;
}
.tab-content-home .badge.badge-orange {
  background-color: #f17108;
}
.tab-content-home .badge.badge-info {
  background-color: #1a85a5;
}
.tab-content-home .badge.badge-rexamen {
  background-color: #1fa546;
}

/* The page body is itself a .container. Nested containers keep a fixed
   width and, in Arabic, the extra 30px sticks out to the left of the menu. */
.container-content #wrapper > .container,
.container-content .body_pac.container {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Account menu opens inward so it stays inside the viewport.
   Arabic: icon is on the right, panel grows to the left.
   French: icon is on the left, panel grows to the right. */
.user-settings-wrapper .nav > li.dropdown {
  position: relative;
}
.user-settings-wrapper .dropdown-menu {
  top: 100% !important;
  margin: 4px 0 0 !important;
  width: 200px;
  z-index: 3000;
}
html[dir="rtl"] .user-settings-wrapper .dropdown-menu {
  left: auto !important;
  right: 0 !important;
  float: none !important;
}
html[dir="ltr"] .user-settings-wrapper .dropdown-menu {
  left: 0 !important;
  right: auto !important;
  float: none !important;
}
.user-settings-wrapper .dropdown-menu .btn {
  display: block;
  width: 100%;
  float: none;
  white-space: normal;
  text-align: center;
  margin: 0 0 8px;
}
.user-settings-wrapper .dropdown-menu .btn:last-child {
  margin-bottom: 0;
}

/* Terms link inside the citizen form. Bootstrap paints every link blue. */
.citoyen_condition a,
.citoyen_condition a:visited {
  color: #287900 !important;
}
.citoyen_condition a:hover,
.citoyen_condition a:focus {
  color: #1a5000 !important;
}

/* The French label "Documents de références et guides" is the widest item.
   On a normal window it wraps onto a second line, and the hover style
   changes the line-height, so the bar jumps under the cursor. */
@media (min-width: 768px) {
  .region-primary-menu {
    float: none !important;
    width: 100% !important;
    display: block !important;
  }
  #main-menu {
    display: flex !important;
    flex-wrap: nowrap;
    width: 100%;
    float: none !important;
  }
  #main-menu > li {
    float: none !important;
    flex: 0 1 auto;
  }
  #main-menu > li > a,
  #main-menu > li > a:hover,
  #main-menu > li > a:focus {
    line-height: 20px !important;
    white-space: nowrap;
    transition: background-color 0.2s ease !important;
  }
  html[dir="ltr"] #main-menu > li > a,
  html[dir="ltr"] #main-menu > li > a:hover,
  html[dir="ltr"] #main-menu > li > a:focus {
    padding: 14px 8px !important;
  }
}

/* Administration menu replaces the public links and stays in the same bar.
   Arabic: actions on the right, account on the left. French: the reverse. */
body:has(section.menu-admin) #main-menu {
  display: none !important;
}
section.menu-admin {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  margin: 0;
  padding: 0;
  box-shadow: none;
}
#main-navigation section.menu-admin,
#main-navigation section.menu-admin .row,
#main-navigation section.menu-admin .col-md-12,
#main-navigation section.menu-admin .navbar-collapse {
  float: none !important;
  width: 100% !important;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  max-height: none !important;
}
#main-navigation section.menu-admin .navbar-collapse {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
/* Bootstrap clearfix pseudos become flex items and pin the links in the middle. */
#main-navigation section.menu-admin .navbar-collapse:before,
#main-navigation section.menu-admin .navbar-collapse:after {
  content: none !important;
  display: none !important;
}
html[dir="rtl"] #main-navigation section.menu-admin {
  direction: rtl;
}
html[dir="ltr"] #main-navigation section.menu-admin {
  direction: ltr;
}
#main-navigation section.menu-admin .navbar-nav,
#main-navigation section.menu-admin .navbar-nav > li {
  float: none !important;
}
#main-navigation section.menu-admin .navbar-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
}
#main-navigation section.menu-admin #menu-top > li > a {
  color: #fff !important;
  background: transparent !important;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 16px;
  padding: 16px 18px !important;
  line-height: 22px;
}
#main-navigation section.menu-admin #menu-top > li > a:hover,
#main-navigation section.menu-admin #menu-top > li > a:focus {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}
#main-navigation section.menu-admin .dropdown-menu {
  background: #fff !important;
  border: none !important;
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  min-width: 220px;
  padding: 6px 0;
}
html[dir="rtl"] #main-navigation section.menu-admin .dropdown-menu {
  right: 0;
  left: auto;
  text-align: right;
}
html[dir="ltr"] #main-navigation section.menu-admin .dropdown-menu {
  left: 0;
  right: auto;
  text-align: left;
}
#main-navigation section.menu-admin .dropdown-menu > li > a {
  color: #333 !important;
  background: #fff !important;
  text-transform: none;
  letter-spacing: 0;
  padding: 12px 20px !important;
  font-size: 15px;
  border: 0 !important;
}
#main-navigation section.menu-admin .dropdown-menu > li > a:hover,
#main-navigation section.menu-admin .dropdown-menu > li > a:focus {
  background: #f0f7f0 !important;
  color: #247d25 !important;
}
.content_layout .card,
.content_layout .panel,
.content_layout .table-responsive {
  max-width: 100%;
}
html[dir="rtl"] .content_layout .panel .form-group > .pull-right {
  float: right !important;
}
@media (max-width: 767px) {
  #main-navigation section.menu-admin .navbar-collapse,
  #main-navigation section.menu-admin .navbar-nav {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Admin lists: add button above the table, green page numbers on the left in Arabic,
   edit and delete on the same line. */
#panel-utilisateur .utilisateur-ajout,
#panel-theme .theme-ajout {
  margin: 0 0 12px;
}
#panel-utilisateur .utilisateur-ajout .btn,
#panel-theme .theme-ajout .btn {
  font-size: 16px;
  line-height: 1.4;
  padding: 10px 22px !important;
}
html[dir="rtl"] #table-utilisateur th,
html[dir="rtl"] #table-utilisateur th a,
html[dir="rtl"] #table-utilisateur td:not(.actions),
html[dir="rtl"] #table-theme th,
html[dir="rtl"] #table-theme th a,
html[dir="rtl"] #table-theme td:not(.actions) {
  text-align: right;
}
#panel-utilisateur .utilisateur-barre,
#panel-theme .theme-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0;
}
#panel-utilisateur .utilisateur-barre:before,
#panel-utilisateur .utilisateur-barre:after,
#panel-theme .theme-barre:before,
#panel-theme .theme-barre:after {
  content: none !important;
  display: none !important;
}
#panel-utilisateur .utilisateur-barre > [class*="col-"],
#panel-theme .theme-barre > [class*="col-"] {
  float: none !important;
  width: auto !important;
  padding: 0;
}
html[dir="rtl"] #panel-utilisateur .pagination-utilisateur,
html[dir="rtl"] #panel-theme .pagination-theme {
  float: left !important;
  text-align: left;
}
html[dir="ltr"] #panel-utilisateur .pagination-utilisateur,
html[dir="ltr"] #panel-theme .pagination-theme {
  float: right !important;
  text-align: right;
}
#panel-utilisateur .pagination,
#panel-theme .pagination {
  display: inline-block;
  margin: 0;
}
#panel-utilisateur .pagination a,
#panel-utilisateur .pagination .current,
#panel-theme .pagination a,
#panel-theme .pagination .current {
  color: #287900;
}
#panel-utilisateur .pagination a:hover,
#panel-utilisateur .pagination a:focus,
#panel-theme .pagination a:hover,
#panel-theme .pagination a:focus {
  color: #1a5000;
}
#panel-utilisateur .pagination .current,
#panel-theme .pagination .current {
  font-weight: 700;
}
#table-utilisateur td.actions,
#table-theme td.actions {
  white-space: nowrap;
  vertical-align: middle;
}
#table-utilisateur td.actions .btn,
#table-utilisateur td.actions form,
#table-theme td.actions .btn,
#table-theme td.actions form {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin: 0 4px;
  float: none !important;
}
#table-utilisateur td.actions .btn,
#table-theme td.actions .btn {
  min-width: 44px;
  min-height: 34px;
  padding: 6px 14px !important;
  border-radius: 4px;
}
#table-utilisateur td.actions .material-icons,
#table-theme td.actions .material-icons {
  font-size: 20px;
  line-height: 20px;
  width: 20px;
  height: 20px;
}

/* The participation mark hangs past the menu bar. Nudge it back onto that line. */
html[dir="rtl"] .banner img[src*="logo.png"] {
  position: relative;
  left: 30px;
}
html[dir="ltr"] .banner img[src*="logo.png"] {
  position: relative;
  right: 16px;
}

/* Date popup on export statistiques (and every .calendrier field).
   The widget is also a .dropdown-menu, so the nav rule
   margin-top:-35px covers the input. In Arabic, Bootstrap leaves
   left:0 while the plugin sets right, which stretches the calendar
   across the page. Keep it the size of its grid, under the field. */
.datepicker.datepicker-dropdown.dropdown-menu {
  margin: 0 !important;
  width: auto !important;
  float: none !important;
  padding: 4px;
  z-index: 2500 !important;
}
html[dir="rtl"] .datepicker.datepicker-dropdown.dropdown-menu {
  left: auto !important;
}
html[dir="ltr"] .datepicker.datepicker-dropdown.dropdown-menu {
  right: auto !important;
}

.header-title,
.header-title a,
.header-title a:hover,
.header-title a:focus,
.header-title a:visited,
.header-title span {
  font-family: Tahoma, Arial, sans-serif !important;
  text-decoration: none !important;
}

.services-block a,
.services-block a:hover,
.services-block a:focus,
.services-block a:visited {
  text-decoration: none !important;
}

.doc-card-info,
.doc-card-info a,
.doc-card-info a:hover,
.doc-card-info a:focus,
.doc-card-info a:visited {
  font-family: Tahoma, Arial, sans-serif !important;
  text-decoration: none !important;
  color: #fff !important;
}

.tab-content-home h3,
.tab-content-home h3 a,
.tab-content-home h3 a:hover,
.tab-content-home h3 a:focus,
.tab-content-home .content-text b {
  font-weight: 400 !important;
  text-decoration: none !important;
}

/* Citizen suivi (mes pétitions) shares #table-petition / #panel-petition
   with the public and admin petition lists.
   Bootstrap 3.3.7 LTR loads after bootstrap.rtl and sets th { text-align: left },
   so Arabic headers sit on the left of each cell.
   A col-* class on a cell also matches the column float (Bootstrap float:left,
   then rtl-fix float:right) and pulls that cell out of the table, so the
   cell shrinks and its content sticks to the left. Keep the table as wide
   as the card content, in normal table flow, with text on the right.
   French (html[dir=ltr]) is unchanged. */
html[dir="rtl"] #panel-petition .table-responsive,
html[dir="rtl"] #table-petition {
  float: none;
  width: 100%;
  max-width: 100%;
}
html[dir="rtl"] #table-petition th,
html[dir="rtl"] #table-petition th a,
html[dir="rtl"] #table-petition td:not(.actions) {
  text-align: right;
}
html[dir="rtl"] #table-petition td[class*="col-"],
html[dir="rtl"] #table-petition th[class*="col-"] {
  float: none !important;
  display: table-cell !important;
  width: auto !important;
}

/* Bootstrap 3.3.7 (CDN) loads after style.css and puts the underline back
   on a:hover and a:focus. The theme keeps links and buttons clickable
   without that line. */
a,
a:hover,
a:focus,
a:active,
a:visited,
button,
button:hover,
button:focus,
.btn,
.btn:hover,
.btn:focus,
.btn:active {
  text-decoration: none !important;
}