/*
 Theme Name:   Bootscore Child
 Description:  Bootscore Child Theme
 Author:       Bootscore
 Author URI:   https://bootscore.me
 Template:     bootscore
 Version:      6.0.0
 Requires at least: 5.0
 Tested up to: 6.6
 Requires PHP: 7.4
 License: MIT License
 License URI: https://github.com/bootscore/bootscore-child/blob/main/LICENSE
 Text Domain:  bootscore
*/

/* 
All style editing is done via /assets/scss/_bootscore_custom.scss
*/

/* ==========================================================================
   1. Settings – Variables, fonts, etc.
   ========================================================================== */

:root {
  --noir-charbon: #2c2c2c;
  --blanc-coton: #f3f3f3;
  --rouge-tuile: #a24d3f;
  --saumon: #f6eeec;
  --header-height: 80px;
}

@font-face {
  font-family: "Lexend";
  src: url("assets/fonts/Lexend-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900; /* Ici on part du principe que c'est une police variable */
  font-style: normal;
}

@font-face {
  font-family: "Julius sans";
  src: url("assets/fonts/JuliusSansOne-Regular.ttf") format("truetype");
  font-weight: 200; /* Ici on part du principe que c'est une police variable */
  font-style: normal;
}

@font-face {
  font-family: "Noto sans";
  src: url("assets/fonts/NotoSans-VariableFont_wdth\,wght.ttf")
    format("truetype");
  font-weight: 100 900; /* Ici on part du principe que c'est une police variable */
  font-style: normal;
}

/* ==========================================================================
   2. Normalize / Reset
   ========================================================================== */

/* ==========================================================================
   3. Base – Éléments HTML bruts
   ========================================================================== */

body {
  font-family: "Noto sans" !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Lexend" !important;
}


h1, .fs-1 {
  font-size: clamp(34px, calc(34px + (70 - 34) * (100vw - 320px) / 1600), 70px);
}

h2, .fs-2 {
  font-size: clamp(26px, calc(26px + (55 - 26) * (100vw - 320px) / 1600), 55px);
}

h3, .fs-3 {
  font-size: clamp(20px, calc(20px + (43 - 20) * (100vw - 320px) / 1600), 43px);
}

h4, .fs-4 {
  font-size: clamp(16px, calc(16px + (34 - 16) * (100vw - 320px) / 1600), 34px);
}

h5, .fs-5 {
  font-size: clamp(12px, calc(12px + (26 - 12) * (100vw - 320px) / 1600), 26px);
}

h6, .fs-6 {
  font-size: clamp(12px, calc(12px + (20 - 12) * (100vw - 320px) / 1600), 20px);
}
/* ==========================================================================
   4. Layout – Grilles, containers, colonnes, structure globale
   ========================================================================== */

/* Dimension des container */

@media (min-width: 1550px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1500px;
  }
}

@media (min-width: 1650px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1600px;
  }
}

/* ==========================================================================
   5. Components – Boutons, cartes, modals, etc.
   ========================================================================== */

.btn {
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0 !important;
}


.btn.bg-rouge-tuile:hover {
  background-color: var(--blanc-coton) !important;
  color: var(--rouge-tuile) !important;
  border: solid var(--rouge-tuile) 1px;
}

.btn.bg-blanc-coton:hover{
  background-color: var(--noir-charbon) !important;
  color: white !important;
}

.btn-sm {
  padding: 0.4rem 0.8rem;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0 !important;
}
/* ==========================================================================
   6. Sections – Styles propres à des pages ou sections spécifiques
   ========================================================================== */

/* HEADER */

.navbar-nav {
  --bs-nav-link-color: var(--blanc-coton) !important;
  --bs-nav-link-hover-color: white !important;
  --bs-navbar-active-color: white !important;
}

.header-actions button{
  color: white !important;
}

.navbar-nav .nav-link.active {
  font-weight: bold;
}

@media (max-width:992px) {
  #bootscore-navbar{
  margin-left: 0px !important;
}

}
#masthead {
  transition: all ease 0.5s;
}


.logo-header {
  transition: all ease 0.3s;
}
/* SERVICES */

.icone-service {
  height: 100% !important;
  aspect-ratio: 1/1;
}

.wpcf7-spinner{
  display: none;
}

.offcanvas {
  background-color: var(--noir-charbon);
}

.offcanvas-header{
  color: white;
}


/* REALISATIONS */

.realisation-item {
        position: relative;
        width: 100%;
        padding-top: 100%;
        /* carré parfait */
        background-size: cover;
        background-position: center;
        overflow: hidden;
        transition: transform .3s ease;
    }

    .realisation-item:hover {
        transform: scale(1.02);
    }

    .realisation-hover {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        opacity: 0;
        transition: opacity .3s ease;
        padding: 20px;
    }

    .realisation-item:hover .realisation-hover {
        opacity: 1;
    }

/* ==========================================================================
   7. Utilities – Helpers, classes utilitaires
   ========================================================================== */

.bg-noir-charbon {
  background-color: var(--noir-charbon) !important;
}
.bg-blanc-coton {
  background-color: var(--blanc-coton) !important;
}
.bg-saumon {
  background-color: var(--saumon) !important;
}
.bg-rouge-tuile {
  background-color: var(--rouge-tuile) !important;
  color: white;
}

.text-rouge-tuile {
  color: var(--rouge-tuile) !important;
}
.text-blanc-coton {
  color: var(--blanc-coton) !important;
}
.text-color-3 {
  color: var(--color-3) !important;
}

.font-julius {
  font-family: "Julius sans" !important;
}

.padding-y-offset {
  padding-top: calc(var(--header-height) + 20px) !important;
  padding-bottom: calc(var(--header-height) + 20px) !important;
}


.padding-top-offset {
  padding-top: calc(var(--header-height)) !important;
}


   .icone-bg {
            position: absolute;
            font-size: 30rem;
            color: var(--rouge-tuile);
            opacity: 0.05;
            right: -50px;
            top: -20px;
            z-index: 0;
        }