/**
 * ObsStJean
 * @author RCS
 */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

:root {
    --blue-main:    #00254A;
    --blue-light:   #003366;
    --blue-lighter: #003F7A;
    --blue-dark:    #001C38;

    --text-main:    #eeeeee;
    --text-menu:    #ffffff;
    --titre-main:   #FFA500;
    --titre-photo:  #656161;
    --yellow-main:  #ffe838;
    --yellow-light: #FFFC08;
    --red-footer:   #cc0000;
}

/* display: flow-root; */

body {
  font-weight: normal;
  font-size: 1.0rem;
  line-height: 1.5;
}

#body {
  background-color: var(--blue-main);
  font-weight: normal;
}

#sb-site,
.sb-site-container {
  background-color: var(--blue-main);
}

/* Toutes les sections */
section {
  background-color: var(--blue-light);
}

/* Variations internes */
section:nth-of-type(even) {
  background-color: var(--blue-lighter);
}

/* Hero / intro */
.hero,
.intro,
.showcase {
  background-color: var(--blue-main);
}

#header {
  background-color: var(--blue-main);
  color: var(--titre-main);
}

#header .fixed {
  background: #666;
}

.simplesearch input {
  color: var(--titre-photo);
}

#sidebar .sidebar-content input {
  color: var(--titre-photo);
}

.navbar {
  background-color: var(--yellow-main);
}

.navbar a,
.navbar-brand,
#header #navbar ul.navigation li a {
  font-family: "Roboto", "Arial", "Helvetica", "Tahoma", "Geneva", sans-serif;
  color: var(--text-menu);
  font-weight: 700;
  text-decoration: none;
}

.navbar a:hover,
.navbar a:visited {
  color: var(--blue-main);
}

.header-banner-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 12rem;
  background-image: url('/user/themes/delivernext-astro/images/head-bg.jpg');
  background-size: cover;
  background-position: center;
  z-index: -100; /* arriere-plan */
}

/*#body, p, li, span, div*/
#body,
#body p li span div {
  color: var(--text-main);
}

#body, p, li, span, div {
  font-family: "Exo 2", "Arial", "Helvetica", "Tahoma", "Geneva", sans-serif;
}

h1 {
  color: var(--yellow-main);
  font-family: "Exo 2", "Arial", "Helvetica", "Tahoma", "Geneva", sans-serif;
  font-size: 2.2rem;
  text-transform: none;
}

h2 {
  color: var(--titre-main);
  font-family: "Exo 2", "Arial", "Helvetica", "Tahoma", "Geneva", sans-serif;
  font-size: 2.0rem;
  text-transform: uppercase;
}

h3 {
  color: var(--text-main);
  font-family: "Exo 2", "Arial", "Helvetica", "Tahoma", "Geneva", sans-serif;
  font-size: 1.7rem;
  text-transform: none;
}

h4 {
  color: var(--titre-main);
  font-family: "Exo 2", "Arial", "Helvetica", "Tahoma", "Geneva", sans-serif;
  font-size: 1.2rem;
  text-transform: none;
}

h5 {
  color: var(--text-main);
  font-family: "Exo 2", "Arial", "Helvetica", "Tahoma", "Geneva", sans-serif;
  font-size: 1.0rem;
  text-transform: none;
}

h6 {
  font-family: "Exo 2", "Arial", "Helvetica", "Tahoma", "Geneva", sans-serif;
  font-size: 0.8rem;
}

.list-blog-header h4 {
  text-transform: uppercase;
}

.blog-content-item .list-blog-padding > p:not(.prev-next) {
    font-size: 1.2rem !important;
}

.modular .bottom h2 {
  color: var(--titre-main);
}

.modular .showcase h1 {
  font-family: "Exo 2", "Arial", "Helvetica", "Tahoma", "Geneva", sans-serif;
  font-size: 1.8rem;
}

/* Pour les tablettes (écrans moyens) */
@media (max-width: 768px) {
  .modular .showcase h1 {
    font-size: 1.2rem;
  }
}

/* Pour les mobiles (petits écrans) */
@media (max-width: 520px) {
  .modular .showcase h1 {
    font-size: 1.0rem;
  }
}


.logo table {
  border-collapse: collapse;
  border-spacing: 0;
  border: none;
  table-layout: auto;
  width: unset;
}

.logo td {
  vertical-align: middle;
  text-align: left;
  border: none;
  padding: 0;
}

#header .logo h3 {
  transform: none;
}

.logo h3 {
  color: var(--yellow-main);
  font-family: "Exo 2", "Arial", "Helvetica", "Tahoma", "Geneva", sans-serif;
  font-size: 2.5rem;
  line-height: 2.0rem;
}

/* Pour les portable */
@media (max-width: 1024px) {
    #header .logo h3 {
        font-size: 2.0rem;
        line-height: 1.8rem;
    }
}

/* Pour les tablettes (écrans moyens) */
@media (max-width: 768px) {
    #header .logo h3 {
        font-size: 1.5rem;
        line-height: 1.2rem;
    }
}

/* Pour les mobiles (petits écrans) */
@media (max-width: 520px) {
    #header .logo h3 {
        font-size: 1.2rem;
        line-height: 1.0rem;
    }
}


th {
  background: var(--blue-light);
}

.callout {
  background: var(--blue-main);
  position: static;
}

.callout, .portfolio, .team, .members {
  background: var(--blue-main);
}

.gallery {
  background: var(--blue-main);
}

.gallery .gallery_item .title {
  color: var(--yellow-main);
  font-size: 1.2rem;
}

.callout .callout-line {
  background: var(--blue-main);
}

.callout .pricing-container .pricing-item div {
  background: var(--blue-light);
}

.portfolio .notebooks .notebook-row {
  box-shadow: inset 0px -90px 0px -20px var(--blue-main);
  background: var(--blue-main);
}

.team .members .social-icons li {
 background: var(--blue-light);
}

.team, .members, .social-icons li a {
  color: var(--text-main);
}

.team .members .social-icons li:hover {
  background: rgba(37, 74, 255, 0.5);
}
.team .members .social-icons li:hover i {
  color: var(--text-main);
}

.list-item {
  background-color: var(--blue-light);
  padding: 1em;
}

#body a,
#body a:visited,
#body a:hover,
#body a:focus {
  color: var(--yellow-main);
  text-decoration: none;
}


.glightbox-clean .gslide-description
{
  background-color: var(--blue-main);
}

.glightbox-clean .gslide-title
{
  color: var(--yellow-main);
  text-transform: uppercase;
}


pre {
  background: var(--blue-light);
  border: 1px solid var(--blue-lighter);
}
pre code {
  color: var(--titre-main);
  background: inherit;
}

.modal {
  background: var(--blue-light);
}

.footer {
  font-family: "Exo 2", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
  font-size: 1.0rem;
  color: var(--text-main);
  position: relative;
}

.footer .footer-copyright {
  font-family: "Exo 2", "Arial", "Helvetica", "Tahoma", "Geneva", sans-serif;
}
.footer .footer-menu {
  font-family: "Exo 2", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
}

.footer .logo,
.footer .logo h3,
.footer .logo h3 a {
  color: var(--yellow-main);
}

.footer a,
.footer a:visited,
.footer a:hover {
  color: var(--titre-main);
  text-decoration: none;
}

.tags li {
  text-transform: uppercase;
  font-family: "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
}


.modular .feature .feature-blogs {
  margin-top: 0.1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0.1rem;
}
.modular .feature .feature-blog {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
  align-items: flex-start;
  padding: 0.75rem;
  background: var(--blue-main);
  border-radius: 4px;
  transition: all 0.2s ease;
  border: 1px solid var(--blue-light);
}
.modular .feature .feature-blog:hover {
  background: var(--blue-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-color: var(--blue-lighter);
}
.modular .feature .feature-blog .feature-image {
  flex: 0 0 60%;
  max-width: 60%;
}
.modular .feature .feature-blog .feature-image a {
  display: block;
  overflow: hidden;
  border-radius: 3px;
  border: 1px solid var(--blue-light);
}
.modular .feature .feature-blog .feature-content {
  display: grid;
  grid-template-rows: auto 1fr auto;
  text-align: left;
}
.modular .feature .feature-blog .feature-content h4 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  text-align: left;
}


.featured-posts .featured-item {
  background: var(--blue-main);
  border: 1px solid var(--blue-light);
}
.featured-posts .featured-item:hover {
  background: var(--blue-light);
  border-color: var(--blue-lighter);
}
.featured-posts .featured-item .featured-image {
  flex: 0 0 50%;
  max-width: 50%;
}
.featured-posts .featured-item .featured-image a {
  border: 1px solid var(--blue-light);
}


/* Images Gallery */
.hidden-after-twelve {
    display: none !important;
}

/* Add classes for image location */
img.float-left {
  display:block;
  float:left;
  margin:5px 15px 5px 0;
  max-width: 47%;
}
img.float-right {
  float:right;
  margin:5px 0 5px 15px;
  max-width: 47%;
}
img.aligncenter {
  display:block;
  margin:10px auto;
}

img.border {
  margin:10px auto;
  border: 3px solid var(--yellow-main);
  background-color: var(--blue-dark);
  border-radius: 12px;
  padding:1px;
}
img.noborder-left {
  float:left;
  max-width: 47%;
  height: 20vw;
  margin:5px 15px 5px 0;
  border: 3px none var(--yellow-main);
  background-color: var(--blue-dark);
  border-radius: 12px;
  padding:1px;
}
img.noborder-center {
  display:block;
  margin:10px auto;  
  max-width: 47%;
  height: 20vw;
  border: 3px none var(--yellow-main);
  background-color: var(--blue-dark);
  border-radius: 12px;
  padding:1px;
}
img.noborder-right {
  float:right;
  max-width: 47%;
  height: 20vw;
  margin:5px 0 5px 15px;
  border: 3px none var(--yellow-main);
  background-color: var(--blue-dark);
  border-radius: 12px;
  padding:1px;
}


img.icon-left {
  display:inline;
  float:left;
  margin:5px 15px 5px 0;
  max-width: 47%;
  width: 25vw;
  height: 20vw;
  border: 3px solid var(--yellow-main);
  background-color: var(--blue-dark);
  border-radius: 12px;
  overflow: hidden; /* Empêche le débordement */
}
img.icon-center {
  display:block;
  margin:10px auto;
  max-width: 47%;
  width: 25vw;
  height: 20vw;
  border: 3px solid var(--yellow-main);
  background-color: var(--blue-dark);
  border-radius: 12px;
  overflow: hidden; /* Empêche le débordement */
}
img.icon-right {
  float:right;
  margin:5px 0 5px 15px;
  max-width: 47%;
  width: 25vw;
  height: 20vw;
  border: 3px solid var(--yellow-main);
  background-color: var(--blue-dark);
  border-radius: 12px;
  overflow: hidden; /* Empêche le débordement */
}

.error-hero {
    height: 80vh;
    background-image: url('/user/themes/delivernext-astro/images/error-bg.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
}

.error-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
}

.error-overlay h1 {
    font-size: 4rem;
    margin-bottom: 3rem;
}

.error-content {
    font-size: 1.6rem;
    max-width: 800px;
}

/*********************************/