/* Surcharge des couleurs du template "Consultez" avec les couleurs du logo AUDI.
   Charge apres style.css. Ne pas modifier style.css directement : toute
   correction de couleur passe par ce fichier (meme convention que
   assets/css/audi-theme.css cote back-office). */

:root {
  --theme-color1: #186695;       /* bleu du logo (couleur principale) */
  --theme-color1-rgb: 24, 102, 149;
  --theme-color2: #42AD4F;       /* vert du logo (couleur secondaire) */
  --theme-color2-rgb: 66, 173, 79;
}

/* Quelques regles du template codent leur couleur en dur au lieu de
   passer par les variables ci-dessus : on les corrige ici individuellement. */
.banner-section-seven .swiper-slide .outer-box .banner-bg::before {
  background: linear-gradient(248.19deg, rgba(0, 0, 0, 0) 20.61%, var(--theme-color2) 81.3%);
}
.consult-section::after {
  background: linear-gradient(99.2deg, var(--theme-color2) 32.71%, rgba(66, 173, 79, 0.99) 51.92%, rgba(70, 177, 83, 0.797132) 56.74%, rgba(100, 195, 110, 0.25) 77.85%, rgba(196, 196, 196, 0) 103.7%);
}
.sidebar-service-list .title:before {
  background-color: var(--theme-color1);
}

/* Le logo AUDI est une photo sur fond clair : on l'entoure d'un cartouche
   blanc arrondi pour qu'il reste lisible sur les zones sombres du gabarit
   (menu mobile, pied de page, en-tete collant). */
.audi-logo-box img {
  background: #ffffff;
  border-radius: 8px;
  padding: 4px 10px;
  max-height: 48px;
  width: auto;
}
.footer-left .audi-logo-box img,
.upper-box .audi-logo-box img {
  max-height: 56px;
}
/* Le gabarit force `.logo a img { width: 100% }`, ce qui etire le logo
   AUDI (photo non carree) pour remplir la largeur de son conteneur flex.
   Deux classes ici pesent plus lourd que la regle du gabarit : on repasse
   la largeur en auto pour conserver le ratio d'origine de l'image. */
.logo.audi-logo-box img {
  width: auto;
}

/* Icones Font Awesome utilisees a la place des SVG decoratifs du theme
   pour le contenu propre a AUDI (domaines d'intervention, etc.). */
.service-block .content-box .icon i {
  font-size: 46px;
  color: var(--theme-color1);
  line-height: 1;
}
.about-block .icon i {
  font-size: 40px;
  color: var(--theme-color1);
  line-height: 1;
}

/* Bandes/blocs propres aux pages du site public (evite le CSS inline). */
.audi-cta-band {
  background: var(--theme-color2);
}
/* Bandeau defilant des partenaires (brand-slider) : le gabarit stylise
   `.brand-block a img`, mais nos logos ne pointent vers aucune page. */
.brand-block img {
  width: 100%;
  opacity: 0.6;
  transition: opacity 300ms ease;
}
.brand-block:hover img {
  opacity: 1;
}
.audi-page-header {
  background: var(--theme-color2);
  padding: 60px 0;
}
.audi-anchor-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}
.audi-anchor-nav a {
  padding: 8px 18px;
  font-size: 14px;
}
.audi-section-alt {
  background: var(--theme-color-gray);
}
.audi-quote-card {
  background: #fff;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .05);
}
.audi-subtle-label {
  opacity: .85;
}
.audi-anchor-nav-wrap {
  padding: 20px 0 40px;
}

.audi-check-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.audi-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text-color);
}
.audi-check-list i {
  color: var(--theme-color1);
  margin-top: 4px;
}

.audi-side-card {
  background: var(--theme-color-gray);
  border-radius: 12px;
  padding: 28px;
}
.audi-side-card-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.audi-side-card-item:last-child {
  border-bottom: none;
}
.audi-side-card-meta {
  font-size: 14px;
  color: var(--theme-color1);
  #white-space: nowrap;
  font-weight: bold;
}

.audi-project-cover {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
  max-height: 420px;
}
.audi-gallery-thumb {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
}

.audi-pub-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.audi-pub-cover {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.audi-pub-cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--theme-color-gray);
  color: var(--theme-color1);
  font-size: 46px;
}
.audi-pub-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.audi-pub-tag {
  display: inline-block;
  font-size: 11px;
  
  letter-spacing: .05em;
  color: var(--theme-color1);
  font-weight: 600;
}
.audi-pub-excerpt {
  flex: 1;
}

.audi-contact-icon {
  font-size: 34px;
  color: var(--theme-color1);
}

#style-switcher {
  display: none;
}

/* Garde-fou : les animations d'entree en scroll (tm-gsap-animate-*)
   translatent temporairement leurs elements hors de leur position finale ;
   sans cela, une barre de defilement horizontale indesirable peut
   apparaitre pendant la transition. */
.page-wrapper {
  overflow-x: hidden;
}
.tm-gsap-img-parallax {
  overflow: hidden;
}

.audi-footer-tagline {
  color: var(--theme-color-silver);
  margin-bottom: 0;
}

/* Le gabarit utilise des titres tres imposants (h1 90px, h2 48px...) qui
   deteignent sur toutes les pages du site public. On reduit l'echelle
   globale via les memes variables CSS que style.css (redefinies ici,
   ce fichier est charge apres et gagne a specificite egale). */
:root {
  --h1-font-size: 52px;
  --h2-font-size: 34px;
  --h3-font-size: 24px;
  --h4-font-size: 20px;
  --line-height-heading-h1: 60px;
  --line-height-heading-h2: 42px;
  --line-height-heading-h3: 32px;
  --line-height-heading-h4: 28px;
}

/* Texte justifie sur l'ensemble du site public (paragraphes de contenu
   uniquement : titres, boutons et libelles de menu ne sont pas concernes). */
.page-wrapper p,
.page-wrapper .text {
  text-align: justify;
}

/* Le menu principal (6 entrees) deborde de son espace disponible entre le
   logo et le bloc contact et retombe sur 2 lignes des le chargement,
   meme en plein desktop. On resserre l'espacement entre les entrees pour
   qu'elles tiennent sur une seule ligne (le fix du logo ci-dessus liber
   aussi de la place en empechant son etirement). */
.main-header.header-style-one .main-menu .navigation > li,
.header-style-one .main-box .nav-outer .nav .navigation li {
  margin-right: 16px;
}
.main-header.header-style-one .main-menu .navigation > li > a {
  font-size: 14px;
}
/* Les sous-menus (dropdown "Domaines d'intervention") doivent eux aussi
   tenir sur une seule ligne par entree, sans repli du texte. */
.main-menu .navigation > li > ul {
  white-space: nowrap;
}
.main-menu .navigation > li > ul > li > a {
  white-space: nowrap;
}

/* La bannitre d'accueil (banner-section) a un espacement haut/bas de
   215px, qui, combine aux gros titres du gabarit, rendait le slide
   demesurement haut (le contenu depassait la hauteur d'un ecran). */
.banner-section .outer-box {
  padding: 70px 0;
}
/* Le sur-titre de la banniere ("Cabinet d'urbanisme...") est en bleu de
   marque, illisible sur la photo assombrie du slide (fond bleu-nuit). */
.banner-section .content-column .inner-column .sub-title {
  color: var(--theme-color-white);
  border-bottom-color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 767.98px) {
  .banner-section .outer-box {
    padding: 50px 0;
  }
}

/* La barre superieure (email/adresse + Presentation/Suivi de dossier)
   n'etait coloree en bleu que sur son quart droit (pseudo-element du
   gabarit) avec un texte reste noir. Fond bleu complet + texte blanc. */
.header-style-one .header-top {
  background-color: var(--theme-color1);
}
.header-style-one .header-top::after {
  display: none;
}
.header-top .top-left .info-list,
.header-top .top-left .info-list a,
.header-top .top-left .info-list i,
.header-top .top-right ul li a {
  color: var(--theme-color-white);
}
.header-top .top-right ul li a:hover {
  color: rgba(255, 255, 255, 0.75);
}

/* Agrandir le logo AUDI sans agrandir le menu principal : seule la
   hauteur du logo change, l'espacement/la taille de police du menu
   restent ceux definis plus haut. */
.main-box .logo.audi-logo-box img {
  max-height: 64px;
}

/* Cartes "Domaines d'intervention" : le content-box doit remplir toute
   la largeur quand la carte n'a pas d'image (aucune photo disponible
   pour ce domaine) puisque l'image-box n'est alors pas rendue.
   min-width:0 est necessaire pour qu'un flex-item texte puisse retrecir
   sous la largeur de son contenu (sinon un mot long le forcerait a
   deborder au lieu de passer a la ligne). */
.service-block .content-box {
  flex: 1;
  min-width: 0;
}
/* Sans largeur explicite, la largeur "auto" de l'image-box se calcule a
   partir de la taille intrinseque de la photo (1920px) AVANT que
   max-width/object-fit ne s'appliquent : cela ecrasait le content-box
   voisin a quelques dizaines de pixels de large. Largeur fixe + l'image
   recadree en cover pour remplir la boite quel que soit son ratio. */
.service-block .image-box {
  flex: 0 0 260px;
  width: 260px;
}
.service-block .image-box .image,
.service-block .image-box .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 767.98px) {
  .service-block .image-box {
    flex-basis: 130px;
    width: 130px;
  }
}

/* Logo AUDI sous le titre de la rubrique "Qui sommes-nous ?" (page
   Presentation). Meme logique que .audi-logo-box : ratio d'origine
   conserve, hauteur seule contrainte. */
.audi-logo-inline {
  display: block;
  max-height: 130px;
  width: auto;
}

/* Le sur-titre de chaque section (badge bleu arrondi genere par le
   gabarit) n'avait pas de couleur de texte definie et heritait donc du
   texte fonce des titres, illisible sur son propre fond bleu. */
.sec-title .sub-title {
  color: var(--theme-color-white);
}

/* Photo du directeur (section "Mot du Gerant" de la page Presentation). */
.audi-director-card {
  padding: 10px;
}
.audi-director-photo {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
}

/* Image de l'organigramme (section "Organigramme" de la page Presentation). */
.audi-organigramme-image {
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .08);
}

/* Carte "projet phare" mise en avant en tete de chaque groupe de projets
   par domaine (page Projets & realisations). */
.audi-featured-project {
  background-color: var(--theme-color-white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 15px 45px rgba(0, 0, 0, .1);
}
.audi-featured-project-image {
  position: relative;
  min-height: 280px;
}
.audi-featured-project-image img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}
.audi-featured-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: var(--theme-color1);
  color: var(--theme-color-white);
  padding: 6px 16px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
}
.audi-featured-badge i {
  color: var(--theme-color2);
  margin-right: 6px;
}
.audi-featured-project-content {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.audi-featured-project-content .sub-title {
  color: var(--theme-color1);
  font-weight: 600;
  
  font-size: 13px;
  letter-spacing: .5px;
  margin-bottom: 10px;
  display: block;
}
.audi-featured-project-content .title a {
  color: var(--theme-color-dark);
}
.audi-featured-project-content .title a:hover {
  color: var(--theme-color1);
}
.audi-featured-project-content .text {
  margin: 15px 0 20px;
}
.arry-btn-two {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--theme-color1);
  font-weight: 600;
}
.arry-btn-two:hover {
  color: var(--theme-color2);
}
@media (max-width: 767px) {
  .audi-featured-project-image {
    min-height: 220px;
  }
}

/* Bandeau de statistiques (projets & realisations) sur la page d'accueil :
   fond bleu de la marque, donc le texte et les icones doivent passer en
   blanc pour rester lisibles (par defaut le gabarit les affiche en fonce). */
.funfact-section .outer-box .icon i {
  color: var(--theme-color-white);
  font-size: 40px;
}
.funfact-section .outer-box .content-box .title {
  color: var(--theme-color-white);
}
.funfact-section .outer-box .content-box .sub-title {
  color: var(--theme-color-white);
  opacity: .9;
}